Hey all, in this article I’ll briefly go over how I made this animated bar chart with CSS and jQuery.
The demo and source are available below, I used Less, but you can view the compiled CSS in the demo, also.
Note: If you missed the animation, you can simply press “rerun” in the bottom right corner of the demo when you hover your mouse over it.
The HTML
Let’s go over the HTML. While I am sure there are multiple options for this, it seemed easiest for me to go with two ul elements inside of a div. One ul will be used for the vertical axis and values. The other one will be for the horizontal axis and values as well as the bars in the chart itself.
<div id="chart"> <ul id="numbers"> <li><span>100%</span></li> <li><span>90%</span></li> <li><span>80%</span></li> <li><span>70%</span></li> <li><span>60%</span></li> <li><span>50%</span></li> <li><span>40%</span></li> <li><span>30%</span></li> <li><span>20%</span></li> <li><span>10%</span></li> <li><span>0%</span></li> </ul> <ul id="bars"> <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li> <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li> <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li> <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li> <li><div data-percentage="44" class="bar"></div><span>Option 5</span></li> <li><div data-percentage="23" class="bar"></div><span>Option 6</span></li> </ul> </div>
The CSS
As you can see from the HTML above, we will be using data attributes for the percentage values (height of the bars) so that we can use jQuery to animate them.
In the future, we will be able to do this using only CSS, as described here. The idea here is that in the future one could use something like
width: attr(width); height: attr(height);
This is not yet possible, though. That being said we simply make one list go vertically and the other horizontally. The horizontal list has a child element to contain the bars, we initialize that to 0 height so that jQuery can animate it to the height of the data-percentage property
@import url(http://fonts.googleapis.com/css?family=Roboto:400+700); body { background: #30303A; font-family: Roboto; } #chart { width: 650px; height: 300px; margin: 30px auto 0; display: block; } #chart #numbers { width: 50px; height: 100%; margin: 0; padding: 0; display: inline-block; float: left; } #chart #numbers li { text-align: right; padding-right: 1em; list-style: none; height: 29px; border-bottom: 1px solid #444; position: relative; bottom: 30px; } #chart #numbers li:last-child { height: 30px; } #chart #numbers li span { color: #eee; position: absolute; bottom: 0; right: 10px; } #chart #bars { display: inline-block; background: rgba(0, 0, 0, 0.2); width: 600px; height: 300px; padding: 0; margin: 0; box-shadow: 0 0 0 1px #444; } #chart #bars li { display: table-cell; width: 100px; height: 300px; margin: 0; text-align: center; position: relative; } #chart #bars li .bar { display: block; width: 70px; margin-left: 15px; background: #49E; position: absolute; bottom: 0; } #chart #bars li .bar:hover { background: #5AE; cursor: pointer; } #chart #bars li .bar:hover:before { color: white; content: attr(data-percentage) '%'; position: relative; bottom: 20px; } #chart #bars li span { color: #eee; width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center; }
The JavaScript
The last part, the JavaScript is really simple. We will be using each() to loop through all the list items and give the bars the height of the data-percentage attribute value using some animation.
$(function() { $("#bars li .bar").each( function( key, bar ) { var percentage = $(this).data('percentage'); $(this).animate({ 'height' : percentage + '%' }, 1000); }); });