进度条(Progress)

Progress,进度条,用于上传、下载等耗时并且需要显示进度的场景,用户可以随时中断该操作。

完整的进度条结构如下:

<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>
    </div>
    <a href="javascript:;" class="weui-progress__opr">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<br>
<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
    </div>
    <a href="javascript:;" class="weui-progress__opr">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<br>
<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 80%;"></div>
    </div>
    <a href="javascript:;" class="weui-progress__opr">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<div class="weui-btn-area">
    <a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
</div>

div.weui-progress__inner-bar 的默认宽度为 0, 改变改元素的宽度(百分比),即可显示不同的进度。

点击 a.weui-progress__opr 元素,可以中断/取消正在进行的操作;如果不需要该操作,则可以省略掉该结构,进度条长度自动适应。

下面模拟改变进度条的值:

$(function(){
    var progress = 0;
    var $progress = $(\'.weui-progress__inner-bar\');

    function uploading(){
        $progress.width(  progress % 100   \'%\');
        setTimeout(uploading, 20);
    }

    setTimeout(uploading, 20);
});

预览效果如下:

image

爱生活,爱技术

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注