Progress

进度条



        <div class="page__bd page__bd_spacing">
            <div class="mx-progress">
                <div class="mx-progress__bar">
                    <div class="mx-progress__inner-bar js_progress" style="width: 0%;"></div>
                </div>
                <a href="javascript:;" class="mx-progress__opr">
                    <i class="mx-icon-cancel"></i>
                </a>
            </div>
            <br>
            <div class="mx-progress">
                <div class="mx-progress__bar">
                    <div class="mx-progress__inner-bar js_progress" style="width: 50%;"></div>
                </div>
                <a href="javascript:;" class="mx-progress__opr">
                    <i class="mx-icon-cancel"></i>
                </a>
            </div>
            <br>
            <div class="mx-progress">
                <div class="mx-progress__bar">
                    <div class="mx-progress__inner-bar js_progress" style="width: 80%;"></div>
                </div>
                <a href="javascript:;" class="mx-progress__opr">
                    <i class="mx-icon-cancel"></i>
                </a>
            </div>
            <div class="mx-btn-area">
                <a href="javascript:;" class="mx-btn mx-btn_primary" id="btnUpload">上传</a>
            </div>
        </div>
        <script>
            $(function(){
                var $progress = $('.js_progress'),
                    $btnUpload = $('#btnUpload');
                var progress = 0;
                function next() {
                    if(progress > 100){
                        progress = 0;
                        $btnUpload.removeClass('mx-btn_disabled');
                        return;
                    }
                    $progress.css({width: progress + '%'});
                    progress = ++progress;
                    setTimeout(next, 20);
                }
                $btnUpload.on('click', function(){
                    if ($btnUpload.hasClass('mx-btn_disabled')) return;
                    $btnUpload.addClass('mx-btn_disabled');
                    next();
                });
            });
        </script>