Responsive Circular Progress
Responsive Circular Progress Bar using HTML CSS and JQuery
Outline: Responsive Circular Progress
Progress bars are a graphical user interface (GUI) tool used to represent the progress of an ongoing task. They are often used in applications such as word processors, games, and web browsers. You can create a responsive circular progress bar with HTML, CSS, and jQuery. By understanding the concept of a circular progress bar, you’ll be able to create one that keeps users informed of the status of a task.
Circular progress bars are great tools for communicating information about tasks since they look like spinning discs when information is being conveyed— such as how many emails remain in your inbox or how much disk space is left on your system drive. This makes them ideal for displaying information on web pages or within mobile apps during periods of activity such as downloading content or an application update. In addition, designers can easily incorporate attractive styles into their projects using web standards without needing expensive development resources or training in graphic design software suites such as Adobe Photoshop Creative Suite 6— making them ideal for client communication tools and internal company communications alike!
In creating the circular progress bar, create an HTML file and a CSS file, copy and paste the below code in each of the files.
HTML Code: Responsive Circular Progress
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <title>Circular Progress Bar | HTMLCODE</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>
CSS Code: Responsive Circular Progress
@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%;
}
}
Recommended: How to Integrate Facebook Comments Plugin in HTML
