"如何在引导程序中制作加载进度条？"

Question

I've seen this page from w3school for progress bars. I am new to bootstrap and for web programming. It is possible to make it 100% in just 5 seconds?. Like a loading progress bar.

What is a correct way to do it?

Answer 1

Here is a possible solution using twitter bootstrap and jQuery.

Fiddler: https://jsfiddle.net/f6hLt9ak/2/

I have used window.setInterval to set the value for progress-bar every half second. Once the progress bar reaches 100%, I am resetting the value back to 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);

I hope this code sample will give you an idea on how to proceed at your end.

Answer 2

If you are confused to add a progress bar.Try automated progress bar

Pace.Js

Pace is really simple to integrate with web pages.

Add/Copy Stylesheet on your webpage

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

And add JS file

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

---

Sit back Rest of the things Pace will do