javascript - 进度条下的状态文本

标签 javascript jquery progress-bar

我希望进度条运行时是这样的,并且我将在特定值下显示状态 /image/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>

最佳答案

当值增加到一定数字时添加 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);
    })
});

关于javascript - 进度条下的状态文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29065650/

相关文章:

javascript - 使用 php 的实时功能

java - java中的FFMPEG进度条

javascript - 文本始终在背景上可见

javascript - 如何使 float 侧边栏在页脚之前停止 float 而不与其重叠

javascript - 通过 FTP 更新网站但仍然显示旧内容

javascript - Angular js : What is the best way to let Binding Data later update

javascript - 你知道一个前沿的 HTML5 利用、忽略遗留的 JavaScript 框架吗?

javascript - PHP - 在包含在另一个页面中的页面内提交表单

vb.net - 有什么办法可以缩短这段代码吗?

android - ViewPager 中带有 WebView 的进度条