Question

我已经从w3school看到了此页面的进度条。我是bootstrap和Web编程的新手。可以在5秒内完成100％？就像加载进度条一样。

这样做的正确方法是什么？

Answer 1

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

Fiddler：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

如果您对添加进度条感到困惑。请尝试自动进度条

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

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

2 个答案: