如何在bootstrap中创建加载进度条？

Question

我在w3school上看到了进度条的页面。我对bootstrap和web编程来说是个新手。是否有可能在短短5秒内达到100%？就像加载进度条一样。

什么才是正确的方法呢？

Answer 1

这是一个使用twitter bootstrap和jQuery的可能的解决方案。

小提琴手：https://jsfiddle.net/f6hLt9ak/2/

我使用window.setInterval设置了每半秒一次的进度条的值。一旦进度条达到100%，我会将该值重置回0。

HTML：

<div class="row">
        <div class="col-xs-8">
            <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
        </div>
    </div>

JS

var progressBar = $('.progress-bar');
var percentVal = 0;

window.setInterval(function(){
    percentVal += 10;
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100)
    {
        percentVal = 0;      
    }

}, 500);

我希望这个代码示例能让您了解如何在您的终端进行操作。

Answer 2

如果您对添加进度bar.Try自动进度条感到困惑

Pace.Js

Pace真的很容易与网页集成。

在网页上添加/复制样式表

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-barber-shop.css">

并添加JS文件

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>

坐下来休息，Pace可以做的事情