jquery circular progress bar with css

How we can create a circular progress bar using jQuery and CSS? Solution: jQuery Circular Progress Bar With CSS. In other words, Circle/Radial Progress Bar.

Maybe you know about the progress bar, It is a graphical element that shows the progression of the operation. Previously I have shared a normal progress bar which is horizontal. In simple words, a progress bar shows 0% to selected condition’s percentage with an animation-delay. In the circle bar, there will fill stroke 0 to selected percent.

Today you will learn to create a redial or circle progress bar. You can use this program in many places like your skills level in different fields Like you are an expert in HTML then fill it above 95%, and beginner in JS the fill it below 20%, etc. You can see in the preview I have also used this in the same way.

So, Today I am sharing jQuery Circular Progress Bar with CSS. For this program, I have used a jquery based library which is specially made for creating circular progress bars. With the library, we can create these kinds of progress bars very easily. For creating the whole layout used bootstrap, because with using it we can create responsive element quickly.

If you are thinking now how this circular or radial progress bar actually is, then see the preview given below.

Preview Of Circle/Radial Progressing Bar

See this video preview to getting an idea of how this bar looks like.

Now you can see this visually. If you like this, then get the source code of its.

You May Also Like:

jQuery Circular Progress Bar With CSS Source Code

Before sharing source code, let’s talk about it. As you know I used a special library which is circle-progress.min.js  for creating this program. For creating the layout I used Bootstrap grid. All the circle’s data like size, value is handled by HTML data-* command. In past I shared many program based on HTML data-* command. Basically, the data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

For putting the value 65% I used data-value="0.65" & for the circle size used data-size="200" . You can changes values, circle’s size by changing these data’s values. Also, data attribute controlling the stroke thickness for progress using data-thickness="6"  you can also increase & decrease stroke size by changing the value.

In the CSS section, I managed all the positions, font, & color values. Also, JS file has a very short part, because we are using a library. This library has prebuilt functions we just have to put them on our code. After getting the codes you will understand how this works. If you have knowledge on JavaScript then you will definitely understand easily.

For creating this circular bar you have to create 3 files, First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have created jQuery Circular Progress Bar With CSS, A Circle/Radial Progress Bar using HTML, CSS, jQuery, & Bootstrap. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

16 COMMENTS

  1. this is great tutorial.

    but i slightly can not understand about “setting the speed of progress”. i want to make the progress of filling the cirecle slower. how to set it ?
    thank you

  2. Hi Shaan,
    This is truly amazing work here. Thanks for sharing your expertise. How would I change the color of the circle behind the progress bar?

    Is there an argument, like the one below that can set the grey circle color?
    $(el).circleProgress({fill: {color: ‘#daaf48’}})

LEAVE A REPLY

Please enter your comment!
Please enter your name here