等待指示器/Spinner
MDL的等待指示器/spinner组件是等待图标的增强版本,它使用一个边框色彩动态变化 的圆框,清晰地向用户传达作业已经开始、还未完成的状况:
使用spinner组件非常简单:
<any class="mdl-spinner mdl-js-spinner"></any>
spinner默认是隐藏的,为其应用is-active样式进行激活:
<any class="mdl-spinner mdl-js-spinner is-active"></any>
配置选项
MDL class | 说明 |
---|---|
mdl-spinner | 声明元素为spinner组件 |
mdl-js-spinner | 为spinner增加基本的行为逻辑 |
is-active | 显示spinner组件并激活动画 |
mdl-spinner--single-color | 只使用单一色彩 |
为示例代码中的按钮添加一个spinner组件,当点击按钮后,显示spinner,
3秒后任务完成,隐藏spinner