Bringing CSS animation into your web page or app helps focus users’ attention to important design elements and, if done correctly, will add that special touch to create excitement.
These can be micro-animations for user feedback or interaction, enhance the experience and emotion you’re trying to convey, and bring some of your brand personality out in ways you can’t do with everything being static.
However, overdoing CSS animations will kill the vibe and be downright annoying. Cognitive overload will ensue and users will leave what they came to your site for in the first place.
Make Bar Graphs and Circle Charts More Creative with CSS Animations
I was designing an interactive report webpage for a company and we wanted to create some movement in the graphs to make it more visually appealing and exciting to read.
I started out with SVG graphics for the bar graph. After playing with this idea, I realized through trial and error that we can simply them and use basic HTML to build the elements and use data-attributes to display the numbers, CSS to style it, and psuedo-classes to display the data-attributes. This resulted in a lighter weight and easier to code/maintain structure.
For the circle chart, I stuck with SVGs as I had to maintain the roundness of the elements for my specific design. Let’s dig in to the bar graphs first. Custom coding these, instead of using a plugin, gives you the fine-tuned control for any project.
Horizontal Bar Graph CSS Animation
We start with a <section> to contain the bar graph. Inside of this, we have <div> elements that contains each bar and data-attribute along with some sort of other data point. In my case, I used a year.
Since I was keeping the percentage of each bar graph on top of and within the bar, I used data-attributes just to keep it easy. It’s accessible too! In the design, you can see that I kept the year as it’s own element outside of the bar. If I used a data-attribute and visually positioned it outside of the bar, it would be cut off and not visible.
The vision here was to animate the width of the bar and the opacity of the numbers. To do this we are using keyframes. For the data percentages, just update the HTML. For the width of the bars, update each .bar selector.
Vertical Bar Graph CSS Animation
The vertical version of the bar graph has the same idea, except we are animating the height instead of the width of each bar graph. The trick here is that if you don’t absolutely position the bar <div> elements at the bottom of your parent container, they will animate down. So set the parent container to be position: absolute;.
For the vertical bar graph, we are moving the year in the HTML to be after the bar to keep them under the bar graph. For the data percentages just update the HTML. For the width of the bars, update each .bar selector.
Circle Chart CSS Animation
In my particular case, the design called for two sets of data on one circle chart. If your case only calls for one data point, you can remove the second inner <circle> of the SVG (and the CSS to go with it).
Let’s animate the circle chart by starting at the top and animating the the colored border down and to the right. You’ll notice that we rotate the circle -90 degrees. This is because if we don’t, it starts towards the bottom. If you want these circles to animate at a different position, play with the rotation properties.
Thanks to Markus Oberlehner for the inspiration and his codepen for the circle chart animation.
Do you have another way to animate bar graphs and circle charts?
This is how I coded them for my particular project. I’m interested if you have found another way to better craft animations for graphs with only HTML and CSS.