Vertical Animated Progress Bar using Jquery | Sanwebcorner

Vertical Animated Progress Bar using Jquery

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>