Progress - gauge

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Progress - gauge

Previous pageReturn to chapter overviewNext page

Tela

 

bootstrap18

 

Fonte

 

<!DOCTYPE html>

<html>

<head>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

  <style>

       

  </style>

</head>

<body>

  <div class="container">

      <div class="row">

          <div class="span12">

              <hr />

              <div class="progress progress-info progress-striped active">

                  <div class="bar" style="width: 20%">

                  </div>

              </div>

              <div class="progress progress-success progress-striped">

                  <div class="bar" style="width: 40%">

                  </div>

              </div>

              <div class="progress progress-warning progress-striped">

                  <div class="bar" style="width: 60%">

                  </div>

              </div>

              <div class="progress progress-danger progress-striped">

                  <div class="bar" style="width: 80%">

                  </div>

              </div>

          </div>

      </div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

</html>