Building an animated pie chart on jQuery
Forms are a good way to add some zest to the elements on your web page. Circles are especially good in this respect because they are holistic, simple and similar to a pie. Now seriously, who doesn't like pies?
Demo - Source Code
')
As you must have noticed from your own experience of using the Internet for many years, most of the elements on web pages are, in fact, either squares or rectangles. Therefore, in some cases, interesting elements such as circles and triangles in your design can be very useful. This tutorial will show you how to build an animated pie chart similar to the ones you usually see on portfolio sites. This can help visually highlight your skills, as well as demonstrate what tasks you can handle. Take a look at the demo to see the final result.
When writing this tutorial, I will work with Circliful . This is a free jQuery open source plugin. You can download the main file from Github . It includes the .js file along with the appropriate CSS style sheet. The page should contain both, to achieve a circle effect.
My page contains a similar style sheet styles.css for my personal CSS styles. You also need to make a copy of the jQuery library . It is necessary for the plugin to work correctly.
By itself, the page is fairly easy to structure. Circle elements are contained in div tags that use HTML5 attributes to manipulate data. Alternatively, they can be stored in the jQuery function, but if you want to control each element better, then it’s easier to work in HTML.
This is a copy of the first row of circles, consisting of 3 animated units. All these data attributes are further explained in the plugin documentation . Each represents an option that defines an animation effect. Below is a brief description of the options that I use:
I do not insist that you directly edit jquery.circliful.css , of course, if you do not want to customize the plugin. Most of the colors can be changed directly from the HTML5 data attributes, and if you really want to rewrite any of the Circliful styles, I would recommend that you do this in your own style sheet.
Having said this to you, I created my own style sheet for this project, and not to rewrite Circliful styles. The web page itself needs a default layout, which is really easy to design. The content area is centered in a small section for a pie chart. Each region moves freely in the container row within the original #stats div .
Inside each section, the content is held within the .wrap div for fixation in the center. Also, freely moving elements of the circle need an additional container .clearfix , in order for everything to remain properly aligned.
This clearfix class has been known for years as a free-moving container solution. They are usually removed from the text of the document and do not preserve the value of their original width / height. But it maintains the constant width of the #stats container and leaves room for more content that will be located lower on the page.
So, we kneaded the dough, filled the cake pan, put it in the oven and are almost ready to take a sample. If everything looks good enough, what will be the final step? We need some jQuery code to decorate this project.
Open a new script tag at the bottom of this HTML page. It will contain a small excerpt of JavaScript. Since I used all the HTML5 data attributes, we do not need to invoke any jQuery options. The script just has to run the Circliful function on each circle of divs. Using a duplicated class name, such as .circlestat, makes the process very simple.
For those who are not familiar with the syntactic structure of jQuery, I will provide a short description. After the document loads, we launch a new function. Our inner goal is every element that uses the .circlestat class and runs the circliful () function. This brings the Circliful plugin, which creates animation effects, into action and applies additional content / colors.
I cannot say that these circles will always be the best solution. I saw a lot of portfolios that were based on words and numbers, but not on work as such. Consider using these circles in rare cases and try borrowing them for other purposes, beyond simple skills. Your statistics do not have to be measured as a percentage — they can show how many years you have been in business, the total number of your projects, or other similar figures. You can download a copy of my manual for free and experiment with the code to make it better suited for your projects.
Demo - Source Code
')
As you must have noticed from your own experience of using the Internet for many years, most of the elements on web pages are, in fact, either squares or rectangles. Therefore, in some cases, interesting elements such as circles and triangles in your design can be very useful. This tutorial will show you how to build an animated pie chart similar to the ones you usually see on portfolio sites. This can help visually highlight your skills, as well as demonstrate what tasks you can handle. Take a look at the demo to see the final result.
So, let's begin!
When writing this tutorial, I will work with Circliful . This is a free jQuery open source plugin. You can download the main file from Github . It includes the .js file along with the appropriate CSS style sheet. The page should contain both, to achieve a circle effect.
<pre lang="PHP" line="1"><!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Animated Circle Stats - Template Monster Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <link rel="stylesheet" type="text/css" media="all" href="css/jquery.circliful.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.circliful.min.js"></script> </head> </pre> My page contains a similar style sheet styles.css for my personal CSS styles. You also need to make a copy of the jQuery library . It is necessary for the plugin to work correctly.
By itself, the page is fairly easy to structure. Circle elements are contained in div tags that use HTML5 attributes to manipulate data. Alternatively, they can be stored in the jQuery function, but if you want to control each element better, then it’s easier to work in HTML.
<pre lang="PHP" line="1"><div id="stats" class="clearfix"> <div class="wrap"> <div class="row"> <div class="circle-container"> <h3>Photoshop</h3> <div class="circlestat" data-dimension="200" data-text="55%" data-width="30" data-fontsize="38" data-percent="55" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> </div> <div class="circle-container"> <h3>Illustrator</h3> <div class="circlestat" data-dimension="200" data-text="75%" data-width="30" data-fontsize="38" data-percent="75" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> </div> <div class="circle-container"> <h3>After Effects</h3> <div class="circlestat" data-dimension="200" data-text="35%" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div> </div> </div><!-- @end .row --> </pre> This is a copy of the first row of circles, consisting of 3 animated units. All these data attributes are further explained in the plugin documentation . Each represents an option that defines an animation effect. Below is a brief description of the options that I use:
- data-dimension - the total size of the circle width / height;
- data-text - the text that appears in the center of each circle;
- data-width - the thickness of the rotating data arc;
- data-fontsize - text size in the center;
- data-percent - a number from 0-100 that shows the percentages in your circle;
- data-fgcolor - foreground color of the circle;
- data-bgcolor - background color of the circle;
- data-fill - inner fill of the background color of the inner circle.
Layout CSS page
I do not insist that you directly edit jquery.circliful.css , of course, if you do not want to customize the plugin. Most of the colors can be changed directly from the HTML5 data attributes, and if you really want to rewrite any of the Circliful styles, I would recommend that you do this in your own style sheet.
Having said this to you, I created my own style sheet for this project, and not to rewrite Circliful styles. The web page itself needs a default layout, which is really easy to design. The content area is centered in a small section for a pie chart. Each region moves freely in the container row within the original #stats div .
<pre lang="PHP" line="1">/** 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; } </pre> Inside each section, the content is held within the .wrap div for fixation in the center. Also, freely moving elements of the circle need an additional container .clearfix , in order for everything to remain properly aligned.
<pre lang="PHP" line="1">/** 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%; } </pre> This clearfix class has been known for years as a free-moving container solution. They are usually removed from the text of the document and do not preserve the value of their original width / height. But it maintains the constant width of the #stats container and leaves room for more content that will be located lower on the page.
Final touches
So, we kneaded the dough, filled the cake pan, put it in the oven and are almost ready to take a sample. If everything looks good enough, what will be the final step? We need some jQuery code to decorate this project.
Open a new script tag at the bottom of this HTML page. It will contain a small excerpt of JavaScript. Since I used all the HTML5 data attributes, we do not need to invoke any jQuery options. The script just has to run the Circliful function on each circle of divs. Using a duplicated class name, such as .circlestat, makes the process very simple.
<pre lang="PHP" line="1">$(function(){ $('.circlestat').circliful(); }); </pre> For those who are not familiar with the syntactic structure of jQuery, I will provide a short description. After the document loads, we launch a new function. Our inner goal is every element that uses the .circlestat class and runs the circliful () function. This brings the Circliful plugin, which creates animation effects, into action and applies additional content / colors.
I cannot say that these circles will always be the best solution. I saw a lot of portfolios that were based on words and numbers, but not on work as such. Consider using these circles in rare cases and try borrowing them for other purposes, beyond simple skills. Your statistics do not have to be measured as a percentage — they can show how many years you have been in business, the total number of your projects, or other similar figures. You can download a copy of my manual for free and experiment with the code to make it better suited for your projects.
Source: https://habr.com/ru/post/250943/
All Articles