Responsive Circular Progress Bar Using HTML CSS And JQuery | Free Source Code

Responsive Circular Progress Bar using HTML CSS and JQuery

March 24, 2021
HTML/CSS
Responsive Circular Progress Bar

Tutorial: How to Create a Responsive Circular Progress Bar using HTML CSS and JQuery with Source Code

About How to Create a Responsive Circular Progress Bar using HTML CSS and JQuery

Hello readers, Today in this blog you’ll learn how to create a Responsive Circular Progress Bar using HTML, CSS and JQuery.

The circular progress bars present you with a beautiful and visually-compelling way to showcase a single statistic. In this program, 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 like this responsive circular bar and want to get source codes then you can easily get from the below boxes or can download source files from the download link. You can use these bars to show skills, projects, and many more.

Responsive Circular Progress Bar Source Code

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 these following codes into your file.
HTML FILE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Circular Progress Bar | CampCodes</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 FILE:

@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%;
  }
}

Screenshot

Responsive Circular Progress Bar using html css

Responsive Circular Progress Bar using html css


Related Tutorials: Responsive Chat Box UI Design using HTML and CSS, Responsive Pricing Tables using only HTML & CSS, Responsive Accordion Menu using HTML and CSS

Facebook Comments

Leave a Reply

Your email address will not be published.