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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.