The Circular Progress Bar presents you with a beautiful and visually show statistic. The Circular Progress is a graphical control element used to visualize the progress of an extended computer operation, such as a download, file transfer, or installation.
In this blog(Responsive Circular Progress Bar), there are three bars on the webpage with different percent, and when you refresh the page, the circle graph fills in the percent how much the value entered.
This page is made responsive by using the CSS media query property. On PC, the progress bars are arranged horizontally whereas, on the smaller screen the progress bars are arranged vertically that is one by one. The function of the JavaScript code is to make the progress complete.
The source code of this Responsive Circular Process Bar is given below, if you want the source code of this program, you can copy it. You can use this Circular Progress Bar with your creativity and can take this project to the next level.
Responsive Circular Progress Bar [Source Code]
To make this website, you have to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html 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{
min-height: 100vh;
padding: 20px;
background: #e65c00;
background: -webkit-linear-gradient(to right, #F9D423, #e65c00);
background: linear-gradient(to right, #F9D423, #e65c00);
}
.wrapper{
margin: 30px auto;
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .card{
background: #12192c;
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: #202124;
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: #e65c00;
background: -webkit-linear-gradient(to right, #F9D423, #e65c00);
background: linear-gradient(to right, #F9D423, #e65c00);
-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%;
}
}
.credit a{
text-decoration: none;
color: #fff;
}
.credit {
text-align: center;
}
let options = {
startAngle: -1.55,
size: 150,
value: 0.90,
fill: {gradient: ['#F9D423', '#e65c00']}
}
$(".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.80
});
$(".react .bar").circleProgress({
value: 0.70
});
Thank you for reading our blog. If you face any problem in creating, Responsive Circular Progress Bar using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team