In today’s fast-paced digital world, the demand for visually appealing and interactive user interfaces has increased dramatically. One such interface component is the circular progress bar, which is widely used in web applications, mobile apps, and other digital platforms to visualize progress, status, and completion. A responsive circular progress bar that adapts to different screen sizes is a must-have component for any website or application that needs to deliver a seamless user experience.
In this article, we’ll be discussing the concept of responsive circular progress bars, and how to create them using HTML, CSS, and jQuery.
HTML stands for Hypertext Markup Language and is used to create the structure and content of a web page. It provides the basic building blocks for a website, such as headings, paragraphs, lists, and links, and is used to define the layout and content of a webpage.
CSS stands for Cascading Style Sheets and is used to style and format the HTML content. It is used to define the colors, fonts, spacing, and other visual elements of a web page. With CSS, you can make your website look exactly the way you want it to, and make it responsive to different screen sizes and devices.
jQuery is a fast and lightweight JavaScript library that makes it easier to create dynamic and interactive web applications. It simplifies the process of manipulating HTML and CSS, and enables developers to add animations, effects, and other interactions to a web page.
Creating a Responsive Circular Progress Bar
To create a responsive circular progress bar, we’ll need to use a combination of HTML, CSS, and jQuery. Let’s start by creating the HTML structure for the progress bar.
<!DOCTYPE html>
<!-- Created By Mr. Geek - www.wphotshot.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Circular Progress Bar | wphotshot</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 errors/problems, feel free to contact us.
Find more tutorials regarding Web Development here.
