进度条下的状态文本

Question

当进度条为运行时，我希望它是这样的，我将在特定值下显示状态 http://i.stack.imgur.com/2akWR.gif

你可以在这里查看我的进度条http://jsfiddle.net/220Lzw5m/

jQuery(function ($) {
    var timer = 0;
    $('#code').click(function () {
        clearInterval(timer)
        var value = 0;
        timer = setInterval(function () {
            value++;
            $('.uk-progress-bar').width(value + '%');
            if (value == 100) {
                clearInterval(timer)
            }
        }, 50);
    })
});

/*! UIkit 2.18.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
.uk-progress{-moz-box-sizing:border-box;box-sizing:border-box;height:20px;margin-bottom:15px;background:#f5f5f5;overflow:hidden;line-height:20px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);border-radius:4px}*+.uk-progress{margin-top:15px}.uk-progress-bar{width:0;height:100%;background:#00a8e6;float:left;-webkit-transition:width .6s ease;transition:width .6s ease;font-size:12px;color:#fff;text-align:center;box-shadow:inset 0 0 5px rgba(0,0,0,.05);text-shadow:0 -1px 0 rgba(0,0,0,.1)}.uk-progress-mini{height:6px}.uk-progress-small{height:12px}.uk-progress-success .uk-progress-bar{background-color:#8cc14c}.uk-progress-warning .uk-progress-bar{background-color:#faa732}.uk-progress-danger .uk-progress-bar{background-color:#da314b}.uk-progress-striped .uk-progress-bar{background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:30px 30px}.uk-progress-striped.uk-active .uk-progress-bar{-webkit-animation:uk-progress-bar-stripes 2s linear infinite;animation:uk-progress-bar-stripes 2s linear infinite}@-webkit-keyframes uk-progress-bar-stripes{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes uk-progress-bar-stripes{0%{background-position:0 0}100%{background-position:30px 0}}.uk-progress-mini,.uk-progress-small{border-radius:500px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active" style="width:400px;">
    <div class="uk-progress-bar"></div>
</div>


<button id="code" type="button">Generate Code</button>

Answer 1

当值增加到一定数量时添加if else语句，并在屏幕中添加e消息。检查工作 jsfiddle：http://jsfiddle.net/Beslinda/v87ux5zp/1/

代码：

<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active" style="width:400px;">
    <div class="uk-progress-bar"></div>
</div>
<div id="msg"></div>

<button id="code" type="button">Generate Code</button>

脚本中的if else语句：

jQuery(function ($) {
    var timer = 0;
    $('#code').click(function () {
        clearInterval(timer)
        var value = 0;
        timer = setInterval(function () {
            value++;
            $('.uk-progress-bar').width(value + '%');
            if (value == 20) {
                 $("#msg").html("Load files");

            }
            else if(value==40){
                 $("#msg").html("Clean code");

            }
            else if(value==60){

                 $("#msg").html("Creating files..");

            }
             else if(value==80){

                 $("#msg").html("Upload");

            }
            else if(value==100){
                 clearInterval(timer)
                 $("#msg").html("finish");

            }
        }, 50);
    })
});

进度条下的状态文本

Status Text under Progress Bar

javascript

jquery

progress-bar