进度条

  1. <div class="um-progress">
  2.     <div class="um-progress-bar um-progress-bar-info"  style="width: 20%">
  3.         <span class="count"></span> Complete
  4.     </div>
  5. </div>

class 属性 描述
um-progress (必填项),进度条控件标记
um-progress-bar (必填项),控制进度条默认背景色和颜色值
um-progress-bar-primary,
um-progressbar-info,
um-progress-bar-success,
um-progress-bar-warning,
um-progress-bar-danger		 (可选值),改变背景色为其他值

如果要使用带条纹的进度条，只需在um-progress上添加um-progress-striped

js调用:
  1. var prog = UM.progress(3000);
  2. // 3000(ms) 为进度执行时间
  3. // 先定义好事件监听
  4. var bar = $(".um-progress-bar").eq(0);
  6. handle.start(function() {
  7.     console.log("动画开始");
  8. }).step(function(percent, restime) {
  9.    bar.width(percent.toPrecision(3) * 100+'%')
  10.    console.log("剩余时间:"+(""+restime/1000).slice(0, 3)+"秒")
  11.    bar.find(".count").html((percent * 100).toPrecision(3) + "% 完成")
  12. })
  13. // 最后执行动画
  14. handle.start();

如下监听动画开始start,可监听的事件还有
动画停止事件stop, 动画完成事件finish,动画进行事件step

step函数会在动画执行过程中执行，可通过step函数参数获取dom元素、进度和剩余时间

文档更新时间: 2018-01-12 16:27