Progress bars are used to showcase skills and other data in a pictorial view so that users can understand the data quickly. In our previous article we had seen how to create horizontal progress bars and in this tutorial let us check out the way to create animated progress pie chart widget for Weebly site. Out of many available options easy pie chart plugin is one of the simple ways to create pie progress charts. The widget will look something like below and you can customize the colors and content as per your need.
Download source files to create this widget on your site.
Animated Progress Pie Chart Widget for Weebly
The widget is created by modifying the free jQuery easy pie chart plugin and add custom script and CSS to it. It has the following features:
- Fully responsive on all devices.
- Specify any percentage for the progress, if you don’t want the % symbol remove it from the script file.
- Customize the colors of the circle, progress animation and the spikes.
- Place the chart on any place, widget will animate on scroll.
Download the source files and follow the below step by step instruction to add the widget to your Weebly site. The zip download contains the following files:
- jquery.min.js – this is a jQuery file only required for the demo to work. Since Weebly uses jQuery library by default, this file is not required on your Weebly site.
- jquery.easypiechart.min.js – this is the base script file and the custom script is also added inside this file to make it as a single source.
- Progress Pie Chart.html – this is a demo HTML page contains the CSS and the HTML code.
Adding the Widget in Weebly
First upload the jquery.easypiechart.min.js file to your Weebly site under “Theme > Edit HTML / CSS > Assets”. Link the script to the required page under “Pages > Select the page > Advanced > Header Code” by adding the below code:
<script src="files/theme/jquery.easypiechart.min.js"></script>
The CSS contains three main components – container, individual pie blocks and the chart controlled through .chart-container, .pr-chart-ctrl and .pr-chart classes respectively.
Add the following CSS (available with Progress Pie Chart.html) under “Pages > Select the page > SEO Settings > Footer Code” section.
<style> .chart-container .pr-chart-ctrl { display:block; float:left; width:25%; } .chart-container .pr-chart-ctrl .pr-chart { display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px; } .chart-container .pr-chart-ctrl .pr-chart canvas { display:block; margin:0 auto; padding:0; vertical-align:center; } .chart-container .pr-chart-ctrl .pr-chart i { position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080; } .chart-container .pr-chart-ctrl p{ margin:0; padding:0; text-transform:uppercase; color:green; } @media screen and (max-width:500px) { .chart-container .pr-chart-ctrl { width:100%; margin-bottom:50px; } } @media screen and (min-width:501px) and (max-width:900px) { .chart-container .pr-chart-ctrl { width:50%; margin-bottom:50px; } } </style>
The final part is to add the below HTML inside an “Embed Code” element. You can replace the dummy percentages and the titles with your own.
<ul class="chart-container"> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="25"><i></i></div> <p>WordPress Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="50"><i></i></div> <p>Weebly Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="75"><i></i></div> <p>Search Engine Optimization</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="100"><i></i></div> <p>Blog Consulting</p> </li> </ul>
Customizing the Widget
The jquery.easypiechart.min.js file contains the below script to control the behavior of the pie progress animation.
size: 200, barColor: '#F85656', trackColor: '#f1f1f1', scaleColor: 'violet', scaleLength: 5, lineWidth: 5, lineCap: 'square', onStep: function(from, to, percent) { $(this.el).find('i').text(Math.round(percent) + '%');
You can remove the % to delete it from the chart display and the control of the remaining variables are as below:
Variable |
Control |
size | Define the size the pie chart circle. |
barColor | Color of the progress animation. |
trackColor | Color of the pie circle. |
scaleColor | Color of the spikes. |
scaleLength | Length of the spikes. |
lineWidth | Width of the progress pie chart circle. |
lineCap | End of progress animation, possible values are round, square and butt. |
Full Width Parallax Pie Chart
Adding the above widget using embed code element will make it looking plain. You can make a beautiful parallax pie chart using section element like below:
Follow the below instructions to create pie chart with parallax image background.
- Drag and drop a section element. Click on the section element on content area and then click “Edit Background” option.
- Choose image as background and set scrolling effect as parallax. You can also set color background and the video background is only available for pro users.
- Now drag and drop an embed code element and add the HTML code as provided in the above section.
- Publish your site and see the animated pie chart with parallax image background.
10 Comments
Leave your reply.