如何在bootstrap中制作加载进度条？

Question

我从 w3school 看到这个页面的进度条。我是 bootstrap 和网络编程的新手。有可能在短短 5 秒内使其达到 100% 吗？比如加载进度条。

正确的做法是什么？

Answer 1

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

我已使用 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 与网页集成非常简单。

Add/Copy 网页上的样式表

<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 会做的其他事情

如何在bootstrap中制作加载进度条？

How to make a loading progress bar in bootstrap?

html

javascript

twitter-bootstrap

progress-bar