Example Bootstrap Progress Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Progress Bar</title>
<!-- these are library file of css-->
<link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- this is library file of Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--this is library file of javascript-->
<script src="bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- this css used for body-->
<script src="js/modernizr.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function() {
if (!Modernizr.meter) {
alert('Sorry your browser does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000 / max) * 5,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
}
;
});
</script>
<style>
body {
background-color: #f9f9f9;
}
/*=== This is a hole container part===*/
.container{
width: 890px;
height:130px;
}
/*=== This is a hole progress bar css===*/
.demo-wrapper {
width: 500px;
margin: 30px auto 0;
}
.html5-progress-bar {
padding: 15px 15px;
border-radius: 3px;
background-color: #626262;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2);
}
.html5-progress-bar progress {
background-color: #F1F1F1;
border: 0;
width: 80%;
height: 18px;
border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-bar {
background-color: #f3f3f3;
border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-value {
background: #5CB85C;
background: -moz-linear-gradient(top, #5CB85C 0%, #5CB85C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5CB85C), color-stop(100%,#a5c956));
background: -webkit-linear-gradient(top, #5CB85C 0%,#a5c956 100%);
background: -o-linear-gradient(top, #5CB85C 0%,#a5c956 100%);
background: -ms-linear-gradient(top, #5CB85C 0%,#a5c956 100%);
background: linear-gradient(to bottom, #5CB85C 0%,#a5c956 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5CB85C', endColorstr='#a5c956',GradientType=0 );
border-radius: 9px;
}
.html5-progress-bar progress::-moz-progress-bar {
background: #5CB85C;
background: -moz-linear-gradient(top, #5CB85C 0%, #a5c956 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5CB85C), color-stop(100%,#a5c956));
background: -webkit-linear-gradient(top, #5CB85C 0%,#a5c956 100%);
background: -o-linear-gradient(top, #5CB85C 0%,#a5c956 100%);
background: -ms-linear-gradient(top, #5CB85C 0%,#a5c956 100%);
background: linear-gradient(to bottom, #5CB85C 0%,#a5c956 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5CB85C', endColorstr='#a5c956',GradientType=0 );
border-radius: 9px;
}
/*=== This is a % value of progress bar css===*/
.html5-progress-bar .progress-value {
padding: 0px 5px;
line-height: 20px;
margin-left: 5px;
font-size: .9em;
color: #F5F5F5;
height: 18px;
float: right;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%s</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
