Blog / General

M/s VIKASH TECH - Circular Progress Bar using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create an Animated Circular Progress Bar using HTML CSS & JavaScript.The Circular Progress Bar c

September 19, 2022 · 2 min read

Hello readers, Today in this blog you'll learn how to create an Animated Circular Progress Bar using HTML CSS & JavaScript.
The Circular Progress Bar component lets you show the progress of a specific operation, using, as progress bar, a circular SVG pattern. Changing the stroke-dash offset and stroke-dash array values of the second shape creates the fill effect.
In this program (Circular Progress Bar), at first, on the webpage, this circular progress bar is in the initial stage where there is no circle animation and the percentage of this bar is also stops at 0%. And when you refresh the browser then the circular bar creates the color fill effect and the percentage of this bar is also starts increasing. When it completed 100%, the fill effect stops filling as well the percent number also stop increasing.

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
 <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Circular Progress Bar | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="circular">
      <div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
        <div class="dot">
          <span></span>
        </div>
<div class="bar left">
          <div class="progress">
</div>
</div>
<div class="bar right">
          <div class="progress">
</div>
</div>
</div>
</div>
<script>
      const numb = document.querySelector(".numb");
      let counter = 0;
      setInterval(()=>{
        if(counter == 100){
          clearInterval();
        }else{
          counter+=1;
          numb.textContent = counter + "%";
        }
      }, 80);
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  background: #dde6f0;
}
.circular{
  height: 100px;
  width: 100px;
  position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
  position: absolute;
  z-index: 6;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin: -40px 0 0 -40px;
  background-color: #dde6f0;
  border-radius: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
  z-index: 1;
  box-shadow: none;
}
.circular .numb{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 18px;
  font-weight: 500;
  color: #4158d0;
}
.circular .bar{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  -webkit-border-radius: 100%;
  clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress, .dot span{
  background: #4158d0;
}
.circle .left .progress{
  z-index: 1;
  animation: left 4s linear both;
}
@keyframes left {
  100%{
    transform: rotate(180deg);
  }
}
.circle .right{
  z-index: 3;
  transform: rotate(180deg);
}
.circle .right .progress{
  animation: right 4s linear both;
  animation-delay: 4s;
}
@keyframes right {
  100%{
    transform: rotate(180deg);
  }
}
.circle .dot{
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 10px;
  margin-top: -5px;
  animation: dot 8s linear both;
  transform-origin: 0% 50%;
}
.circle .dot span {
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
@keyframes dot{
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
    z-index: 4;
  }
  100% {
    transform: rotate(270deg);
    z-index: 4;
  }
}

M/s VIKASH TECH - Circular Progress Bar using HTML CSS & JavaScript

Vikash Mishra