In last article i provided the horizontal animated bar. Now i will tell you how to create simple vertical type animated progress bar using jquery and css. This is one of the easiest method and also very useful to the websites. In this example i will provided the full code and the demo page change accourding to your choice
Code for Vertical Animated Progress Bar :
<html>
<head>
<title>Vertical Animated Progress Bar using Jquery</title>
<style>
.jqbar
{
position: relative;
top: 100px;
}
.jqbar.vertical
{
text-align: center;
display: inline-block;
}
.jqbar.vertical span
{
display: block;
font-size: 11px;
font-weight: bold;
}
.jqbar.vertical .bar-percent
{
font-size: 11px;
font-weight: bold;
position: absolute;
height: 20px;
margin-bottom: 5px;
width: 100%;
}
.jqbar.vertical .bar-level-wrapper
{
position: relative;
display: inline-block;
overflow: hidden;
}
.jqbar.vertical .bar-level
{
position: absolute;
}
.bar-label
{
width:80px;
}
</style>
</head>
<body>
<h1>Vertical Animated Progress Bar using Jquery</h1>
<div class="container">
<div class="bars">
<div id="bar-1">
</div>
<div id="bar-2">
</div>
<div id="bar-3">
</div>
<div id="bar-4">
</div>
<div id="bar-5">
</div>
<div id="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 () {
$('#bar-1').jqbar({ label: 'Cricket', value: 90, barColor: '#D64747', orientation: 'v' });
$('#bar-2').jqbar({ label: 'Football', barColor: '#FF681F', value: 70, orientation: 'v' });
$('#bar-3').jqbar({ label: 'Vollyball', barColor: '#ea805c', value: 50, orientation: 'v' });
$('#bar-4').jqbar({ label: 'Kabadi', barColor: '#88bbc8', value: 90, orientation: 'v' });
$('#bar-5').jqbar({ label: 'Chess', barColor: '#939393', value: 70, orientation: 'v' });
$('#bar-6').jqbar({ label: 'Basketball', barColor: '#3a89c9', value: 50, orientation: 'v' });
});
</script>
0 Comments