Bootstrap Progress Bar Examples




Bootstrap Progress Bar

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <h2>Progress Bars</h2>
      <div class="progress">
         <div class="progress-bar progress-bar-success" role="progressbar"
          aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
            <span class="sr-only">90% Complete (Sucess)</span>
         </div>
      </div>
      <div class="progress">
         <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
            <span class="sr-only">30% Complete (info)</span>
         </div>
      </div>
   </body>
</html>

Output