Use Bootstrap to create a special progress bar and a bootstrap progress bar

Use Bootstrap to create a special progress bar and a bootstrap progress bar

Bootstrap basic progress bar implementation

1. Use class = progress class style for outer containers

2. The container that truly displays the progress bar style uses the class = progress-bar class style

Example:

<Div class = "progress"> <div class = "progress-bar"> </div> <! -- You can add width to set the percentage currently loaded by the progress bar --> <div class = "progress-bar" style = "width: 10%;"> </div> <! -- You can specify a text value to display the information of the current progress bar --> <div class = "progress-bar" style = "width: 10%;"> 10% </div> <! -- If the progress of the current progress bar is 0 and you want to display the bottom layer of the progress bar, you can specify min-width --> <div class = "progress-bar" style = "width: 0; min-width: 2px "> </div>

Color progress bar

The color progress bar style is added to the layer-by-layer container, and the progress-bar is added to the same container.

1. progress-bar: Default theme color, dark blue

2. progress-bar-success: progress bar on success, green

2. progress-bar-info: Information progress bar, blue

3. progress-bar-warning: warning progress bar, yellow

4. progress-bar-danger: Error progress bar, red

Stripe progress bar

The style of the stripe progress bar is: class = "progress-striped", which is added to the outer container, that is, together with progress.
Progress-striped

Custom development simulated loading progress bar (bootstrap + jquery)

<Div class = "progress-striped"> <div class = "progress-bar" id = "probar" style = "width: 0% "> 0% </div> <script> var sum = 0; $. fn. addprofun = function () {var add = Math. floor (Math. random () * 10); sum + = add; if (sum> 100) sum = 100; $ ("# probar" ).css ("width ", num + "%"); $ ("# probar "). text (num + "%"); if (sum = 100) {clearInterval (addpro); // The 800 delay is set here because it takes time to load the progress bar to 100, if there is no delay, it will appear: loading is finished, and the progress bar has not been loaded. window. setTimeout (function () {$ ("# probar "). text ("loaded") ;}, 800) ;}; var addpro = window. setInterval ($. fn. addprofun, 100); </script>

Now, the content is over. I hope it will help you!