Bootstrap Progress
0 3762
Bootstrap Progress - A default progress bar in Bootstrap. Bootstrap progress bar used for page loading. Learn Bootstrap Tutorials click here
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:
Share:
Comments
Waiting for your comments