Material Design Lite组件之进度指示器

1.进度条

1.1.介绍

Material Design Lite（MDL）进度组件是网页或应用程序中背景活动的可视指示器。 进度指示器包含一个（通常）水平条，其中包含一些传达运动感的动画。 虽然一些进度设备指示完成的大致或特定百分比，但MDL进度组件仅传达活动正在进行且尚未完成的事实。进度指示器是用户界面中已建立但非标准化的功能，可为用户提供应用程序状态的直观线索。 因此，它们的设计和使用是整体用户体验的重要因素。 

1.2.配置选项

类名	效果	其他
mdl-js-progress	为容器设置默认行为指示器	必需类
mdl-progress--indeterminate	添加动画效果	可选类

1.3.应用举例

1.3.1.默认进度条

<!-- Simple MDL Progress Bar -->
<div id="p1" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });
</script>

1.3.2.循环进度条

<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

1.3.3.带缓冲的进度条

<!-- MDL Progress Bar with Buffering -->
<div id="p3" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(33);
    this.MaterialProgress.setBuffer(87);
  });
</script>

2.进度圈

2.1.介绍

Material Design Lite（MDL）微调组件是经典的“等待光标”（它在硬件和软件版本中显着不同）的增强型替代品，并指出存在正在进行的过程，其结果尚不可用。 微调器由一个开放的圆圈组成，它在顺时针方向上动画时改变颜色，并清楚地表明一个过程已经开始但尚未完成。
Spinner本身不执行任何操作，无论是通过其显示还是用户点击或触摸它，并且不表示进程的具体进度或完成程度。 MDL微调器组件提供了各种类型的微调器，并允许您添加显示效果。

Spinners是大多数用户界面的一项相当新的功能，并且无论硬件设备，操作系统或浏览器环境如何，都可为用户提供一致的关于正在进行的活动的可视提示。 他们的设计和使用是整体用户体验的重要因素。

2.2.配置选项

类名	效果	其他
mdl-spinner	定义容器为进度圈组件	必需类
mdl-js-spinner	为进度圈添加默认行为	必需类
is-active	为进度圈添加动画	可选
mdl-spinner--single-color	使用系统默认的颜色	可选

2.3.应用举例

<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<!-- MDL Spinner Component with Single Color -->
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>