A jQuery Radial Progress plug-in with 4 Demos

The radial progress bar

The circular or radial progress bar can be used for showing the pie charts, the progress of a task like downloading or saving the data, etc. for your web projects.

In this tutorial, the radial-progress-bar which is based on jQuery is used for showing you demos.

I will also show how you may set up this plug-in to be used for your project.

A demo of simple radial progress bar

In this example, a default progress bar is created which is blue in color and moves by 1% in each step. If you look at the background, it is kept semi-transparent. The percentage text is kept in the center for this circular progress bar which size is 40px.  See a demo online:

jQuery progress bar

See online demo and code

This is really simple to set up for your web page. Just include the plug-in JS files: radial-progress-bar.js and examples.js. You also need to include the jQuery library:

 <script src=”http://code.jquery.com/jquery-1.12.3.min.js”></script>

<script src=”js/radial-progress-bar/radial-progress-bar.js”></script>

<script src=”js/radial-progress-bar/examples.js”></script>

You may get these files from the plug-in page here by downloading the package.

The markup is really simple, create a div tag with class = “example1”. The example1’s specification is placed at the examples.js file where jQuery code is used for creating the default radial progress bar with the following options:

jQuery("#example1").radialProgress("init", {

'size': 100,

'fill': 5,



}).radialProgress("to", {'perc': 100, 'time': 10000});

For increasing the size of the circle or changing the color of text, time etc.– you may modify these options. I will show this in coming examples.

A demo of creating pie chart progress bar

Following is a demo of pie chart where values are displayed in the center. The color and percentage are set by using the color and perc parameters of data option in jQuery code. The font size is 13px that you may modify as per need and to match the design and available space on your web page.

jQuery pie chart progress bar

Following is the code:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
       <link rel="stylesheet" href="css/radial-progress-bar/examples.css">

</head>
<body role="document">

        <section>
          <div id="pie " class="example" style="width: 100px;"></div>
          <h2>A demo of pie chart</h2>
        </section>

        <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
        <script src="js/radial-progress-bar/radial-progress-bar.js"></script>
        <script src="js/radial-progress-bar/examples.js"></script>

</body>
</html>

Pie ID is used in the jQuery code for specifying the options of the pie chart.

A demo of changing circular progress bar colors

To change the colors to match the design pattern of your website or as per your liking, you need to change certain properties in the main JS files of the plug-in. I will recommend you to make a copy of the main file and refer to that copy on your web page. Make any changes there, so if you face any problems you may replace the original one.

In this demo, I will change the default blue color of the progress bar and percentage text along with the remaining circle. The red color is used for the progress bar while light red for the remaining progress. While the text color is also red.

jQuery radial progress bar custom

If you compare the code of this and the first example, the only difference is the radial-progress-bar-amend.js file which is referenced just above the </body> tag. This is the copy of main plug-in file where I changed only two options for changing the color.

For changing the color of the default bar, find the radialProgress function in that JS file. Inside the function, locate the color and background options. The color will deal with the progress bar and percentage text while the background with the remaining progress.

Also, these color changes will also apply to the other progress bars like pie-chart or concentric bars.

A demo of changing the size and fill of the circle

Similarly, by changing a few options in the examples.js file, you may change the size of the circle and its filling option. See the demo where I doubled the size of the circle and also increased the thickness of the line.

jQuery radial progress bar size

Again, the markup is the same as first example except the examples.js file is replaced by examples-amend.js where the following script is used:

jQuery("#example1").radialProgress("init", {

'size': 200,

'fill': 15,



}).radialProgress("to", {'perc': 100, 'time': 10000});