Animated Progress Pie Chart Widget for Weebly

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.