Home Web Development JavaScript jQuery Circular Progress Bar With CSS | Circle/Radial Progress Bar

jQuery Circular Progress Bar With CSS | Circle/Radial Progress Bar

July 17, 2019

21422

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.

https://webdevtrick.com/wp-content/uploads/jquery-circle-progress-bar.mp4?_=1

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

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.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Circle Progress Bar | Webdevtrick.com</title>
  
  <link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="style.css">

</head>

<body>

  <section id="circleBar">

    <h1>Circle Progress Bar</h1>
    <p>These Circle Progress Bars Created Using JQuery's Special Library</p>

  <div class="container">
    <div class="row">
      <div class="col-md-3">						
        <div class="round"
          data-value="0.87"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-html5" aria-hidden="true"></i> HTML Skill</span>
        </div>
      </div>
      <div class="col-md-3">					
        <div class="round"
          data-value="0.74"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-css3" aria-hidden="true"></i> CSS Skill</span>
        </div>
      </div>
      <div class="col-md-3">			
        <div class="round"
          data-value="0.65"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-jsfiddle" aria-hidden="true"></i> JavaScript Skill</span>
        </div>
      </div>
      <div class="col-md-3">			
        <div class="round"
          data-value="0.95"
          data-size="200"
          data-thickness="6">
          <strong></strong>
          <span><i class="fa fa-laptop" aria-hidden="true"></i> Bootstrap Skill</span>
        </div>
      </div>
    </div>	
  </div>
  <button class="btn" onClick="Circlle('.round');">Refresh</button>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Circle Progress Bar | Webdevtrick.com</title>

</head>

<body>

<h1>Circle Progress Bar</h1>

<p>These Circle Progress Bars Created Using JQuery's Special Library</p>

<div class="round"

data-value="0.87"

data-size="200"

data-thickness="6">

<span><i class="fa fa-html5" aria-hidden="true"></i> HTML Skill</span>

</div>

<div class="round"

data-value="0.74"

data-size="200"

data-thickness="6">

<span><i class="fa fa-css3" aria-hidden="true"></i> CSS Skill</span>

</div>

<div class="round"

data-value="0.65"

data-size="200"

data-thickness="6">

<span><i class="fa fa-jsfiddle" aria-hidden="true"></i> JavaScript Skill</span>

</div>

<div class="round"

data-value="0.95"

data-size="200"

data-thickness="6">

<span><i class="fa fa-laptop" aria-hidden="true"></i> Bootstrap Skill</span>

</div>

<button class="btn" onClick="Circlle('.round');">Refresh</button>

</section>

</body>

</html>

style.css

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

/* Code By Webdevtrick ( https://webdevtrick.com ) */
#circleBar {
  margin-top: 200px;
  text-align: center;
  font-family: 'Staatliches', cursive;

}
#circleBar .round {
  min-height: 255px;
  margin-top: 30px;
  position: relative;
  margin-bottom: 20px;
}
#circleBar .round strong {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transform: translate(-50%);
  font-size: 40px;
  color: #212121;
  font-weight: 100;
}
#circleBar span {
  display: block;
  color: #999;
  font-size: 16px;
  margin-top: 10px;
}
#circleBar span i {
  color: #ff5c5c;
  font-size: 22px;
  margin-right: 6px;
}
section button:hover {
  background-color: #ff5c5c;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

#circleBar {

margin-top: 200px;

text-align: center;

font-family: 'Staatliches', cursive;

}

#circleBar .round {

min-height: 255px;

margin-top: 30px;

position: relative;

margin-bottom: 20px;

}

#circleBar .round strong {

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

transform: translate(-50%);

font-size: 40px;

color: #212121;

font-weight: 100;

}

#circleBar span {

display: block;

color: #999;

font-size: 16px;

margin-top: 10px;

}

#circleBar span i {

color: #ff5c5c;

font-size: 22px;

margin-right: 6px;

}

section button:hover {

background-color: #ff5c5c;

}

function.js

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

/* Code By Webdevtrick ( https://webdevtrick.com ) */
function Circlle(el){
  $(el).circleProgress({fill: {color: '#ff5c5c'}})
    .on('circle-animation-progress', function(event, progress, stepValue){
					$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
			});  
};
Circlle('.round');

/* Code By Webdevtrick ( https://webdevtrick.com ) */

function Circlle(el){

$(el).circleProgress({fill: {color: '#ff5c5c'}})

.on('circle-animation-progress', function(event, progress, stepValue){

$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');

});

};

Circlle('.round');

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

Bryan July 17, 2019 At 5:19 pm

Brother, loved your work… Hope to see more of your work

Reply
- shaan July 17, 2019 At 5:22 pm
  
  Thanks, Stay connected for new posts.
  
  Reply
Abdul Muttaqin July 17, 2019 At 7:09 pm

Thank you shaan , still waitt of other post

But , make more about PHP shaan

Reply
- shaan July 18, 2019 At 2:43 am
  
  sure, thanks for your comment
  
  Reply
सचिन ब्लॉगर July 18, 2019 At 11:29 am

Woo this is amazing mujhe bhi sikhna h ye sab please help me

Reply
- shaan July 18, 2019 At 2:38 pm
  
  bhai aap link building krne aye ho ys sach me sikhna he aapko?
  
  Reply
  - JOHIDUL ISLAM July 22, 2019 At 8:33 am
    
    Bhai pdf upload karo na pls…..
    
    Reply
Lovelesh singh July 18, 2019 At 4:57 pm

Nice tutorial

Reply
JOHIDUL ISLAM July 22, 2019 At 8:34 am

Tutorials ki pfd upload dya kaarooooo brooooo

Reply
- shaan July 22, 2019 At 8:42 am
  
  Sure, I will try.
  
  Reply
Mahesh October 3, 2019 At 10:04 am

How width out on click display circular progress bars.

Reply
frei October 8, 2019 At 4:46 am

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

Reply
ali October 22, 2019 At 5:11 pm

great work
how to set value 100%

Reply
kams May 4, 2020 At 5:34 pm

how to make those left percentage area trasparent??? any idea bro??

Reply
Michael Duncan October 27, 2020 At 4:10 pm

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’}})

Reply
Al Zobaer July 7, 2021 At 4:42 pm

If I download circle-progress.min.js file. Then how can I use it? Waiting for your reply. Thank you

Reply