Hello readers, Today in this blog you’ll learn how to create a Responsive Circular Progress Bar using HTML CSS & jQuery. Earlier I have shared a blog on how to create Product Cards with Fly to Cart Effect and now it’s time to create Circular Progress Bar.
The circular progress bars present you with a beautiful and visually compelling way to showcase a single statistic. In this program [Circular Progress Bar], there are three bars on the webpage with different percent, and when you refresh the page, the circle graph fills to the percentage-based location. These bars are fully responsive to any device like a tablet, mobiles, etc.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Shopping Cards with Fly to Cart Effect].
Video Tutorial of Circular Progress Bar
In the video tutorial, you have seen the Responsive Circular Progress Bar and it’s done with the jQuery Circle Progress Bar plugin. You can also create these circular bars with HTML SVG but there you can do only limited things. If you want pure HTML CSS & JavaScript Circular Bar then you can read this blog about Circular Progress Bar with JavaScript.
You might like this:
Responsive Circular Progress Bar [Source Codes]
To create this program (Circular Progress Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Circular Progress Bar | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="circle">
<div class="bar"></div>
<div class="box"><span></span></div>
</div>
<div class="text">HTML & CSS</div>
</div>
<div class="card js">
<div class="circle">
<div class="bar"></div>
<div class="box"><span></span></div>
</div>
<div class="text">JavaScript</div>
</div>
<div class="card react">
<div class="circle">
<div class="bar"></div>
<div class="box"><span></span></div>
</div>
<div class="text">React JS</div>
</div>
</div>
<script>
let options = {
startAngle: -1.55,
size: 150,
value: 0.85,
fill: {gradient: ['#a445b2', '#fa4299']}
}
$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});
$(".js .bar").circleProgress({
value: 0.70
});
$(".react .bar").circleProgress({
value: 0.60
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
.wrapper{
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .card{
background: #fff;
width: calc(33% - 20px);
height: 300px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .card .circle{
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
cursor: default;
}
.card .circle .box,
.card .circle .box span{
position: absolute;
top: 50%;
left: 50%;
}
.card .circle .box{
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.8);
transition: all 0.2s;
}
.card .circle:hover .box{
transform: translate(-50%, -50%) scale(0.91);
}
.card .circle .box span,
.wrapper .card .text{
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.circle .box span{
font-size: 38px;
font-family: sans-serif;
font-weight: 600;
transform: translate(-45%, -45%);
transition: all 0.1s;
}
.card .circle:hover .box span{
transform: translate(-45%, -45%) scale(1.09);
}
.card .text{
font-size: 20px;
font-weight: 600;
}
@media(max-width: 753px){
.wrapper{
max-width: 700px;
}
.wrapper .card{
width: calc(50% - 20px);
margin-bottom: 20px;
}
}
@media(max-width: 505px){
.wrapper{
max-width: 500px;
}
.wrapper .card{
width: 100%;
}
}
That’s all, now you’ve successfully created a Responsive Circular Progress Bar using HTML CSS & jQuery. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
