Diagrammatic representation is best way to attract the customers. So this types of horizontal animated progress bar is very useful to represent the data in pictorial format. This is one of the simple to create using javascript and jquery. You can display the datas in percentage wise using this simple animated bars.
The below image shows the animated progress bar. This example have the demo pages and full codes, You can download and customize yourself according to your projects. I hope this post is helpful, will post vertical animated progress bar in next post.
The below image shows the animated progress bar. This example have the demo pages and full codes, You can download and customize yourself according to your projects. I hope this post is helpful, will post vertical animated progress bar in next post.
Code for Horizontal Progress bar:
<html>
<head>
<title>How to create Horizontal Progress animated bar using jquery</title>
<style>
.hari-bar
{
position: relative;
top: 100px;
}
.jqbar.horizontal span
{
display: inline-block;
margin-left: 15px;
font-size: 14px;
font-weight: bold;
}
.jqbar.horizontal .bar-percent
{
font-size: 14px;
font-weight: bold;
height: 50px;
margin-bottom: 15px;
}
.bar-label
{
width:100px;
}
</style>
</head>
<body>
<h1>How to create Horizontal Progress bar using jquery</h1>
<div class="container">
<div class="bars">
<div id="H-bar-1">
</div>
<div id="H-bar-2">
</div>
<div id="H-bar-3">
</div>
<div id="H-bar-4">
</div>
<div id="H-bar-5">
</div>
<div id="H-bar-6">
</div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqbar.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#H-bar-1').jqbar({ label: 'Cricket', value: 95, barColor: '#D64747' });
$('#H-bar-2').jqbar({ label: 'Football', value: 99, barColor: '#FF681F' });
$('#H-bar-3').jqbar({ label: 'Vollyball', value: 75, barColor: '#ea805c' });
$('#H-bar-4').jqbar({ label: 'Kabadi', value: 60, barColor: '#88bbc8' });
$('#H-bar-5').jqbar({ label: 'Chess', value: 30, barColor: '#939393' });
$('#H-bar-6').jqbar({ label: 'Basketball', value: 50, barColor: '#3a89c9' });
});
</script>
</body>
</html>
0 Comments