How To Build jQuery Animated Circle Statistics
Shapes are a fun way to add some distinction to the elements on your webpage. Circles are particularly lovely because they're even, simple, and relate to that cool number pie (like the dessert). And seriously who doesn't love pie? A chump, that's who.
Live Demo - Download Source Code
As you may have noticed after years of web browsing, most elements on a webpage are designed as squares or rectangles. So it can be fun to add more interesting elements like circles and triangles into the mix. This tutorial will demonstrate how to build animated circle stats like you'd typically find on a portfolio website. These can help outline a visual representation of your skillset and what tasks you're able to perform. Take a look at my live demo to see the final result.
Getting Started
For this guide I'll be working with Circliful which is a free open source jQuery plugin. You can download the main source from Github which includes the .js file along with a related CSS stylesheet. We need to include both in the page to get the circle effects.
1 2 3 4 5 6 7 8 9 | <!doctype html> Animated Circle Stats - Template Monster Demo <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="js/jquery.circliful.min.js"></script> |
My page includes a similar styles.css stylesheet for my own CSS styles. You should also grab a copy of the jQuery library which is needed for the plugin to work properly.
The page itself is quite simple to structure. The circle elements are contained in div tags which use HTML5 attributes for data control. These may alternatively be stored in the jQuery function, but if you want more control over each element then it's easier to work within the HTML.
Photoshop
Illustrator
After Effects
Here's a copy of the first circle row which includes 3 animated circles. All these data attributes are further explained in the plugin documentation. Each one represents an option which sets up the animated effect. Here's a brief rundown of the options I'm using:
- data-dimension - total size of the circle in width/height value.
- data-text - text which appears in the center of each circle.
- data-width - thickness of the rotating data bar.
- data-fontsize - font size of the center text.
- data-percent - a number from 0-100 representing the percentage of your circle.
- data-fgcolor - foreground color of the circle.
- data-bgcolor - background color of the circle.
- data-fill - inner fill background color of the inner circle.
CSS Page Layout
It's not necessary to directly edit jquery.circliful.css unless you really want to customize the plugin. Most of the colors can be updated right from the HTML5 data attributes, and if you really want to overwrite any Circliful styles I'd recommend doing so in your own stylesheet.
With that said I did create my own stylesheet for this project, but not to overwrite the Circliful styles. The webpage itself needs a default layout which is admittedly simple to design. The content area is centered with a small section for the circle stats. Each one is floated in a row container within the original #stats div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | /** page structure **/ .wrap { display: block; margin: 0 auto; max-width: 800px; } #intro { display: block; margin-bottom: 25px; text-align: center; } #intro p { font-size: 1.8em; line-height: 1.35em; color: #616161; font-style: italic; margin-bottom: 25px; } #stats { display: block; width: 100%; padding: 15px 0; background: #f8f8f8; border-top: 4px solid #c3c3c3; border-bottom: 4px solid #c3c3c3; } #stats .row { display: block; } .circle-container { display: block; float: left; margin-right: 55px; margin-bottom: 45px; } .circle-container h3 { display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: #363636; text-shadow: 1px 1px 0 #fff; } |
Inside each section the content is held within a .wrap div to fix everything into the center. Also the floated circle elements need an additional container of .clearfix so that everything stays aligned properly.
1 2 3 4 5 6 | /** clearfix **/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } |
This clearfix class has been known for years as a solution to a container with floated elements. Typically they're removed from the document flow and don't retain their original width/height values. But this keeps the #stats container at a solid width and opens room for more content lower on the page.
The Finishing Touches
So we've mixed the batter, filled the pie tin, tossed it into the oven and we're just about ready to taste it. Once it all looks pretty good what's the final step? We just need that bit of jQuery code as the topping onto this project.
Down at the bottom of this HTML page open a new script tag which will contain a small bit of JavaScript. Since I've used all HTML5 data attributes we don't need to call any options within jQuery. The script just needs to run Circliful's function on each of the circle divs. Using a duplicate class name like .circlestat makes this process a piece of pie!
1 2 3 | $(function(){ $('.circlestat').circliful(); }); |
For those who aren't familiar with jQuery syntax I'll give a quick rundown. After the document finishes loading we run a new function. Inside we're targeting every element using the class .circlestat and running the function circliful(). This calls our Circliful plugin into action which creates the animated effects and applies the extra content/coloring.
I can't say that these circles will always be the greatest solution. I've seen numerous portfolios which rely heavily on words & numbers, but not enough on the work itself. Consider using these circles sparingly and try adopting them for other purposes beyond just skills. Your stats don't only need to be measured in percentages - they could outline how many years you've been in business, your total amount of projects, or other similar numbers. Feel free to download a copy of my tutorial source and play around with the code for your own web projects.
First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.
Get more to your email
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.