Bootstrap Progress

Bootstrap Progress – A default progress bar in Bootstrap. Bootstrap progress bar used for page loading.

Example:

<!DOCTYPE html>
<html lang =“en”>
<head>
<title> Bootstrap </title>

<link href =“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css” rel = “stylesheet”>

</head>

<body>
<h1> Bootstrap Progress bar </h1>

<div class =“progress”>
<div class =“progress progress-striped active”>
<div class =“progress-bar progress-bar-danger” role = “progressbar” aria-valuenow = “60” aria-valuemin = “0” aria-valuemax =“100” style =“width: 80%;”>

<span> 80% Complete </span>
</div>
</div>
</div>

<div class=“progress”>
<div class=“progress-bar” role=“progressbar” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100” style=“width: 70%;”>
<span> 70% Complete </span>
</div>
</div>

<div class=“progress”>
<div class=“progress-bar progress-bar-success” role=“progressbar” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100” style=“width: 60%;”>
<span > 60% Complete </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: 50%;”>
<span > 50% Complete </span>
</div>

</div>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”> </script>
<script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”> </script>

</body>

</html>

RESULT:




Leave a Reply

avatar
  Subscribe  
Notify of