All for Joomla All for Webmasters

Bootstrap Progress Bar

The progress bar shows how far a user is in a process. In Bootstrap, there are several types of progress bars.

The class .progress within a <div> element is used to create a default progress bar in bootstrap.

Bootstrap Progress Bar Example

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Progress bar</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Default Progress Bar</h2>
  12.   <div class=“progress”>
  13.     <div class=“progress-bar” role=“progressbar” aria-valuenow=“70” aria-valuemin=“0” aria-valuemax=“100” style=“width:70%”>
  14.       <span class=“sr-only”>70% Complete</span>
  15.     </div>
  16.   </div>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

Bootstrap Progress bar with Label

The progress bar with label specifies the percentage of progress of a specific process.

You have to remove the .sr-only class from the progress bar to show a visible percentage.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Progress Bar With Label</h2>
  12.   <div class=“progress”>
  13.     <div class=“progress-bar” role=“progressbar” aria-valuenow=“76” aria-valuemin=“0” aria-valuemax=“100” style=“width:76%”>
  14.       76%
  15.     </div>
  16.   </div>
  17. </div>
  18.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

Bootstrap Colored Progress bar

You can use contextual classes to create colored progress bar.

The contextual classes that are used to create colored progress bar:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Colored Progress Bars</h2>
  12.   <p>The contextual classes colors the progress bars:</p>
  13.   <div class=“progress”>
  14.     <div class=“progress-bar progress-bar-success” role=“progressbar” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100” style=“width:40%”>
  15.       40% Complete (success)
  16.     </div>
  17.   </div>
  18.   <div class=“progress”>
  19.     <div class=“progress-bar progress-bar-info” role=“progressbar” aria-valuenow=“50” aria-valuemin=“0” aria-valuemax=“100” style=“width:50%”>
  20.       50% Complete (info)
  21.     </div>
  22.   </div>
  23.   <div class=“progress”>
  24.     <div class=“progress-bar progress-bar-warning” role=“progressbar” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100” style=“width:60%”>
  25.       60% Complete (warning)
  26.     </div>
  27.   </div>
  28.   <div class=“progress”>
  29.     <div class=“progress-bar progress-bar-danger” role=“progressbar” aria-valuenow=“70” aria-valuemin=“0” aria-valuemax=“100” style=“width:70%”>
  30.       70% Complete (danger)
  31.     </div>
  32.   </div>
  33. </div>
  34. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  35. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  36. </body>
  37. </html>

Bootstrap Stripped Progress bar

You can create stripped progress bar by using class .progress-bar-striped .

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Striped Progress Bars</h2>
  12.   <p>The .progress-bar-striped class adds stripes to the progress bars:</p>
  13.   <div class=“progress”>
  14.     <div class=“progress-bar progress-bar-success progress-bar-striped” role=“progressbar” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100” style=“width:40%”>
  15.       40% Complete (success)
  16.     </div>
  17.   </div>
  18.   <div class=“progress”>
  19.     <div class=“progress-bar progress-bar-info progress-bar-striped” role=“progressbar” aria-valuenow=“50” aria-valuemin=“0” aria-valuemax=“100” style=“width:50%”>
  20.       50% Complete (info)
  21.     </div>
  22.   </div>
  23.   <div class=“progress”>
  24.     <div class=“progress-bar progress-bar-warning progress-bar-striped” role=“progressbar” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100” style=“width:60%”>
  25.       60% Complete (warning)
  26.     </div>
  27.   </div>
  28.   <div class=“progress”>
  29.     <div class=“progress-bar progress-bar-danger progress-bar-striped” role=“progressbar” aria-valuenow=“70” aria-valuemin=“0” aria-valuemax=“100” style=“width:70%”>
  30.       70% Complete (danger)
  31.     </div>
  32.   </div>
  33. </div>
  34. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  35. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  36. </body>
  37. </html>

Bootstrap Animated progress bar

You have to use class .active to create animated progress bar.

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Animated Progress Bar</h2>
  12.   <p>The .active class animates the progress bar:</p>
  13.   <div class=“progress”>
  14.     <div class=“progress-bar progress-bar-striped active” role=“progressbar” aria-valuenow=“70” aria-valuemin=“0” aria-valuemax=“100” style=“width:70%”>
  15.       70%
  16.     </div>
  17.   </div>
  18. </div>
  19. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  20. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  21. </body>
  22. </html>

Bootstrap Stacked Progress bar (Multi-colored progress bar)

You can create stacked progress bar by placing multiple bars into the same <div class=”progress”>

  1.   <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Stacked Progress Bars</h2>
  12.   <p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:</p>
  13.   <div class=“progress”>
  14.     <div class=“progress-bar progress-bar-success” role=“progressbar” style=“width:40%”>
  15.       Free Space
  16.     </div>
  17.     <div class=“progress-bar progress-bar-warning” role=“progressbar” style=“width:10%”>
  18.       Warning
  19.     </div>
  20.     <div class=“progress-bar progress-bar-danger” role=“progressbar” style=“width:20%”>
  21.       Danger
  22.     </div>
  23.   </div>
  24. </div>
  25. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  26. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  27. </body>
  28. </html>

 

 

PinIt
submit to reddit

Leave a Reply

Top