如何使加载进度条在引导

How to make a loading progress bar in bootstrap?

本文关键字：何使 加载      更新时间：2023-09-26

我从w3school看到了这个进度条页面。我是新的引导和web编程。在短短5秒内就能达到100%是有可能的。就像一个加载进度条。

正确的做法是什么?

这是一个使用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);
我希望这个代码示例将给您一个关于如何在您结束时进行的想法。

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

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>

坐好

相关文章：