JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Progress Bars

July 3, 2014 by Krishna Srinivasan Leave a Comment

In general, the progress bar is a graphical user interface used to visualize progression of computer operation such as file download, file transfer, showing action status to the users or installation of files. For instance, consider a task running within program that might take a while to complete. It provides some indication to user that the task is running, how long it may take to complete, how much work has already been done etc. These are all the activities which can be shown by using the progress bars.

Bootstrap provides progress bars which uses CSS transition and animations to give some effects for various activities as specified in the above paragraph. This tutorial explains following topics which are used with bootstrap progress bars.

  1. Default Progress Bar
  2. Progress Bar with Label
  3. Alternative Progress Bars
  4. Striped Progress Bar
  5. Animated Progress Bar
  6. Stacked Progress Bar

also read:

  • Bootstrap Setup
  • Bootstrap Typography

To create progress bar, just wrap the .progress class within the div element and next, inside another div element add .progress-bar class.

The below examples shows the various techniques used for implementing the progress bars in Bootstrap. If you have any questions about bootstrap progress bars, please write it in the comments section.

Bootstrap Default Progress Bar

The following example demonstrates creation of default progress bar:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Default Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
<span class="sr-only">55% Complete</span>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Default Progress Bar Example

Bootstrap Default Progress Bar Example

Bootstrap Progress Bar with Label

We can create progress bar to show visible percentage by just removing the .sr-only class within progress bar. It will show the percentage level on the progress bar as shown in the below example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar with Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">55% Complete</span>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Progress Bar Label Example

Bootstrap Progress Bar Label Example

Bootstrap Alternative Progress Bars

It’s possible to create different types of progress bars each with different colors by simply wrapping those classes with div element. Following are the four types which provide different styles to progress bar:

  • progress-bar-success
  • progress-bar-info
  • progress-bar-warning
  • progress-bar-danger

Use these classes within div element along with base class .progress-bar class. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Alternatives of Progress Bar</h2><br>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
80% Complete (Success Bar)
</div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
65% Complete (Info Bar)
</div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-waring" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
50% Complete (Warning Bar)
</div>
</div><br>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
30% Complete (Danger Bar)
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Alternative Progress Bars Example

Bootstrap Alternative Progress Bars Example

Bootstrap Striped Progress Bar

We can create striped effect to progress bars by using the .progress-striped class within div element along with .progress class. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Progress Bars</h2><br>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70% Complete (Success Bar)
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
55% Complete (Info Bar)
</div>
</div><br>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
45% Complete (Warning Bar)
</div>
</div><br>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
30% Complete (Danger Bar)
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Striped Progress Bars Example

Bootstrap Striped Progress Bars Example

Bootstrap Animated Progress Bar

We can animate the stripes from right to left by adding the .active class .progress-bar-striped class within div element. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Progress Bars</h2><br>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70% Complete (Success Bar)
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
55% Complete (Info Bar)
</div>
</div><br>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
45% Complete (Warning Bar)
</div>
</div><br>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
30% Complete (Danger Bar)
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Animated Progress Bars Example

Bootstrap Animated Progress Bars Example

Bootstrap Stacked Progress Bar

We can add multiple progress bars into the same progress bar to stack them by adding all the contextual classes within the .progress class as shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Stacked Progress Bar</h2><br>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
<span class="sr-only">35% Complete (Success Bar)</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
<span class="sr-only">25% Complete (Info Bar)</span>
</div>
<div class="progress-bar progress-bar-waring" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 15%;">
<span class="sr-only">15% Complete (Warning Bar)</span>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
<span class="sr-only">10% Complete (Danger Bar)</span>
</div>
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Stacked Progress Bars Example

Bootstrap Stacked Progress Bars Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved