Material Design Lite 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

等待指示器/Spinner

MDL的等待指示器/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