A progress bar is used to view the completion progress of a task. Technically, it is a combination of HTML/CSS/JS. The HTML <progress> element is used.
JavaScript can be used to manipulate the value of progress bar and gives a desired effect of the whole progress body.
For a good solution, you can refer to our bootstrap premium templates.
1. Basic Progress Bar Attributes
Value- Max
- Min
- progress
Value–> Indicates the current status of the progress bar. It must be greater than or equal to 0.0 and less than or equal to 1.0 or the value of the max attribute (if present).
Max–> Indicates how much task needs to be done before it can be considered as complete. If not specified the default value is 1.0.
Progress–>The <progress> element represents the completion progress of a task.
2. Animated Progress Bar Output
3. Files to be included
Please click the download script button get the files.
- index.html
- style.css
- normalize.css
- jquery.js
- modernizr.js
- bootstrap.css
- bootstrap.js
4. Important files in the head section
To use bootstrap framework , in the head section of our page we must set bootstrap.css, bootstrap.js, normalize.css, style.css, jquery.js, and modernizr.js files as shown below .
<head>
<link href="bootstrap-3.3.4-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap-3.3.4-dist/js/bootstrap.js" type="text/javascript"></script> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<head>JavaScript Code
This is an important javascript part of the head section. Here are all the codes to animate the progress bar, like that progress of bar, timing, percentage etc.
<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>HTML Code
This is the body section.
<body>
<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>CSS code
style.css(This is the CSS body)
/*===Body===*/
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;
}Conclusion
<meter> tag just like a <progress> tag but the meter tag is not supported in Internet Explorer or Safari 5 (and earlier versions).
In this tutorial, we have learned about, how we can make Bootstrap Animated Progress Bar. Hope you have got the concept. Keep follow us for more tutorial blogs in Formget.com.
You may also like:-
