Create A Circular Progress Bar using HTML CSS

Circular progress bars are a staple of web development. It’s one of those little minor details that can immensely impact a user’s experience and flow. While it’s easy to cheat and just get one of those looped animated loading icon gifs or spin an element on the page — a really cool effect to have is a proper loading bar with a percentage progression. In my last post, we see How we can create a Color picker In HTML CSS. SO, In this post, you will learn How to create a Circular Progress bar Using HTML, CSS, and a bit of JS.

But how exactly do you do that?

Turns out you only need a dash of HTML, a little bit of CSS, and a pinch of a JavaScript function.

Animated circular Progress Bar is a type of statistical design used in a variety of websites. It is mainly used to indicate the percentage of one’s qualification in a portfolio website or personal website. It is fully animated, that is, under normal conditions, it has zero percent then it will gradually reach the pre-determined percentage. Different colors have been used to denote percentages.

HTMl Code:

<div class="soft-circle">
  <div class="inside"></div>
  <div class="key">95%</div>
  <div class="circle">
     <div class="shade left">
        <div class="progressing"></div>
     </div>
     <div class="shade right">
        <div class="progressing"></div>
     </div>
   </div>
</div>

CSS Code:

<style>
.soft-circle{
  height:100px;
  width: 100px;
  position: relative;  
  border:solid #000 1px;
  border-radius:50%;}
.soft-circle .inside{
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin: -40px 0 0 -40px;
  background: #390a1f;
  border-radius: 100%;}
.soft-circle .key{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index:10;
  font-size:18px;
  font-weight:500;
  color:#fff;}
.soft-circle .shade{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #eee;
  -webkit-border-radius: 100%;
  clip: rect(0px, 100px, 100px, 50px);}
.circle .shade .progressing{
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
  background: #4158d2;}
.circle .left .progressing{
  z-index:1;
  animation: left 4s linear both;
}
@keyframes left{
  100%{transform: rotate(180deg);}
}
.circle .right {transform: rotate(180deg);
  z-index:3;}
.circle .right .progressing{
  animation: right 4s linear both;
  animation-delay:4s;}
@keyframes right{
  100%{transform: rotate(160deg);}
}
</style>

JavaScript Code:

<script>
const numb = document.querySelector(".key");
let counter = 0;
setInterval(() => {
  if(counter == 95 ){
    clearInterval();
  }else{
    counter+=1;
    numb.textContent = counter + "%";
  }
}, 80);
</script>

Hopefully from this article, you have learned how to make it. If there is any difficulty, you can let me know by discussing below.
Read in detail from our official website Create A Circular Progress Bar using HTML CSS

To see DEMO

Don’t forget to like and Follow😉