Bootstrap Progress Bars

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 4271 red flag

Bootstrap is the CSS technology developed by Twitter. It comes with predefined styles that are used straightly to make our webpage nice look and feel.
Bootstrap contains a bunch of CSS code which is usable at any place.
Recommendation
Read How to create Labels in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
In some situations, it is necessary to show the user about the process of executions. This can be achieved by using Progress Bars. Bootstrap has some predefined progress bar styles which can be used to create nice progress bars easily.

Background

The main objective of this article is to learn creating different types of Progress Bars using bootsrap.css

Using Bootstrap code

We have progress and progress-bar classes in bootstrap.css to create a progress bar.

Normal Progress-Bar:
See the below example of creating simple progress bar,
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 70%;">
            Please wait...
    </div>
</div>
This will shows a progress bar in your browser

Striped Progress-Bar:
Add progress-striped to the above normal progress bar code like below,
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width: 70%;">
            Please wait...
    </div>
</div>
Run this code to see a striped progress bar as following


Animated Striped Progress-Bar:
If you want an active progress bar in which stripes are moving linearly, Add active to the above striped progress bar.
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width: 70%;">
            Please wait...
    </div>
</div>
This gives you a running progress bar
you will see the running stripes in your browser.

Different colors of Normal Progress-Bars:
In Bootstrap, we have some predefined colors of progress bars,
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 20%">
        Processing..20%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 40%">
        Processing..40%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 60%">
        Processing..60%
    </div>
</div>
<div class="progress">
    <div class="progress-bar" style="width: 80%">
        Processing..80%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 100%">
        Done..100%
    </div>
</div>
Observe the above code in which we used five progress colors of danger, warning, info, default and success.
Run this code and see the following output in your browser,


Different colors of Striped Progress-Bars:
As in the same above code, Just add progress-striped to get the striped bars
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width: 20%">
        Processing...20%
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width: 40%">
        Processing...40%
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width: 60%">
        Processing...60%
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar" style="width: 80%">
        Processing...80%
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 100%">
        Done...100%
    </div>
</div>
If you run this code, you will see the striped progress bars in your browser,


Creating Itunes Progress-Bar
We can also create a progress bar which we see in Apple Itunes.
Observe the below simple code snippet of doing that,
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 20%">
        Videos
    </div>
    <div class="progress-bar progress-bar-info" style="width: 40%">
        Music
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 15%">
        Apps
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        Photos
    </div>
    <div class="text-center">Free Space</div>
</div>
In the above code, we are placing different progress-bars in a single progress which gives the following result


Conclusion

In this article, we have seen different types of Progress-Bars using Twitter Bootstrap. Hope you understand. If you have any doubts in this topic, please ask below.

Thanks for reading.

Regards,
Krishna.
Recommendation
Read Bootstrap Utility Components after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Prabhupr on: 6/18/2014 | Points: 25
In sample code for "Animated Striped Progress-Bar:" the word "Active" was missed even though it's mentioned explicitly with the notes
You may want to change the CODE by adding the word "Active"
Posted by: Goud.Kv on: 6/18/2014 | Points: 25
Thanks Jack.,

Good Find..I just missed it in a hurry. I'm going to add it now.

Thanks again,
Krishna.

Login to post response

Comment using Facebook(Author doesn't get notification)