bootstrap js进度条停顿1秒，前进10%

Question

用js或jQuery的For语句实现循环10次的进度条效果，要求每循环一次中间停顿1秒钟，同时进度条前进10%，在进度条中央显示进度，当达到100%时，使用警告框显示“完成”等字样。

Answer 1

提示用的artDialog
题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

<style>
    .processbar{position:relative;width:300px;height:30px;border:solid 1px #ccc;text-align:center;line-height:30px}
    .processbar .text{z-index:2;position:relative}
    .processbar .bgbar{background-color:#ccc;position:absolute;width:0;height:100%;left:0;top:0}
</style>
<div class="processbar">
    <span class="text">0%</span>
    <div class="bgbar"></div>
</div>
<input type="button" onclick="start()" value="启动" />
<script src="http://aui.github.io/artDialog/lib/jquery-1.10.2.js"></script>
<script src="http://aui.github.io/artDialog/dist/dialog-plus.js"></script>
<script>
    /**
     *
     * @el 进度条容器
     * @param delay 延时，默认1s
     * @param progress 进度
     * @param step 每次移动的进度，默认10
      */
    function startProcessBar(el, progress, delay, step) {
        delay = delay || 1;
        step = step || 10;
        progress = progress === undefined ? 0 : progress;

        if (progress < 100)
            setTimeout(function () {
                progress += 10;
                progress = Math.min(progress, 100);
                el.querySelector('.bgbar').style.width = el.querySelector('span').innerHTML = progress + '%';
                startProcessBar(el, progress);
            }, delay * 1000);
        else {
            loading = false;
            dialog({ title: '提示', content: '完成' }).showModal();
        }
    }
    var loading = false;
    function start() {
        if (loading) { alert('上次操作未完成，请耐心等待'); return }
        loading = true;
        var el = document.querySelector('.processbar');
        startProcessBar(el);
    }
</script>