进度条（progressbar）

有准确值的进度条

有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。进度条控件DOM结构：

<div id="demo1" class="mui-progressbar">
  <span></span>
</div>

初始化:

mui(container).progressbar({progress:20}).show();

例如:

mui("#demo1").progressbar({progress:20}).show();

progressbar初始化逻辑：

检查当前容器(container控件)自身是否包含.mui-progressbar类：

当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；

更改显示进度条:

mui(container).progressbar().setProgress(50);

关闭进度条:

mui(container).progressbar().hide();

备注： 关闭进度条一般用于动态创建（DOM中预先未定义）的进度条，调用hide方法后，会直接删掉对应的DOM节点；若已提前创建好DOM节点的进度条，调用hide方法无效；

无限循环进度条:

若无法准确提供当前进度，可以提供无限循环进度条（无限循环进度条类似于waiting等待框,参考[HTML5+规范]

无限循环进度条和准确值的进度条的用法基本相同，有如下差异：

进度条控件DOM结构（多了.mui-progressbar-infinite）：

<div id="demo1" class="mui-progressbar mui-progressbar-infinite">
  <span></span>
</div>

初始化

mui("#demo1").progressbar().show(); 注意：无限循环进度条不显示具体进度，因此初始化时，不能传入progress参数；mui框架也是根据progressbar构造方法中是否包含progress参数来区分当前进度条为有准确值的进度条还是无限循环进度条；

同样因为不显示具体进度的原因，无限循环进度条调用setProgress()方法无效。

关闭进度条

mui("#demo1").progressbar().hide();

页面顶部进度条

页面顶部进度条类似浏览器进度条，固定显示在页面顶部（标题导航控件下方）；因此，若当前页面使用父子双webview模式，子页面没有标题导航组件，则需通过自定义css的方式，重定义顶部进度条的位置，示例代码如下：

body>.mui-progressbar{
  top:0
}

使用页面顶部进度条时，无需编写DOM结构，使用如下代码即可自动创建（顶部无限循环进度条同理）：

mui('body').progressbar({
progress: 20
}).show();

自定义进度条颜色：

<div id="demo5">
  <p class="mui-progressbar infinite-success mui-progressbar-infinite"><span></span></p>
  <p id="changeColor" class="mui-progressbar mui-progressbar-warning"><span></span></p>

</div>

增加CSS样式或者重写官方css样式

//自定义进度条颜色
.mui-progressbar-warning span {
  background-color: #f0ad4e;
}

//自定义无限进度条颜色
.infinite-success:before {
  background-color: #4cd964 !important;
}

mui-progressbar

source code

Mui.css （v3.0.0）部分源码：

<!--3895-->
/* === Progress Bar === */
.mui-progressbar
{
  position: relative;

  display: block;
  overflow: hidden;

  width: 100%;
  height: 2px;

  -webkit-transform-origin: center top;
  transform-origin: center top;
  vertical-align: middle;

  border-radius: 2px;
  background: #b6b6b6;

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.mui-progressbar span
{
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  -webkit-transition: 150ms;
  transition: 150ms;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);

  background: #007aff;
}

mui-progressbar-infinite

无限循环进度条

<div id="demo1" class="mui-progressbar mui-progressbar-infinite">
<span></span>
</div>

source code

mui-progressbar-in

动态设置进度条动画

source code

<!--V3.4-->
<!--4150-->
.mui-progressbar-in
{
-webkit-animation: mui-progressbar-in 300ms forwards;
animation: mui-progressbar-in 300ms forwards;
}
<!--4162-->
@-webkit-keyframes mui-progressbar-in
{
from
{
-webkit-transform: scaleY(0);

opacity: 0;
}

to
{
-webkit-transform: scaleY(1);

opacity: 1;
}
}
@keyframes mui-progressbar-in
{
from
{
transform: scaleY(0);

opacity: 0;
}

to
{
transform: scaleY(1);

opacity: 1;
}
}
@-webkit-keyframes mui-progressbar-out
{
from
{
-webkit-transform: scaleY(1);

opacity: 1;
}

to
{
-webkit-transform: scaleY(0);

opacity: 0;
}
}
@keyframes mui-progressbar-out
{
from
{
transform: scaleY(1);

opacity: 1;
}

to
{
transform: scaleY(0);

opacity: 0;
}
}

# 进度条（progressbar）

# mui-progressbar

# mui-progressbar-infinite

# mui-progressbar-in

进度条（progressbar）

mui-progressbar

mui-progressbar-infinite

mui-progressbar-in