Responsive Circular Progress Bar using HTML, CSS & JavaScript

Responsive Circular Progress Bar using HTML, CSS & JavaScript


Hello developers, today in this blog, you learn to create a Responsive Circular Progress Bar using HTML, CSS & JavaScript.

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.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Circle Progress Bar || Learning Robo</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">Robotics</div> </div> <div class="card js"> <div class="circle"> <div class="bar"></div> <div class="box"><span></span></div> </div> <div class="text">IoT</div> </div> <div class="card react"> <div class="circle"> <div class="bar"></div> <div class="box"><span></span></div> </div> <div class="text">AI</div> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> <script src="script.js"> </script> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive, create a CSS file with the name style.css, and remember that you have to make a file with a .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{
  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;
  }
JavaScript makes the page work functionally. Lastly, create a JavaScript file with the name script.js, and remember that you have to make a file with a .js extension.


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
  });
We hope you would like this Responsive Circular Progress Bar using HTML, CSS & JavaScript.

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.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools