Animated Circular progress bar using Html and CSS

In this tutorial you’ll learn how to create a Circular Progress Bar using HTML and CSS. The circular progress bars use for you a beautiful and visually compelling way to showcase a single statistic.

.progress{
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 15px solid #f2f5f5;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span{
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left{
  left: 0;
}
.progress .progress-bar{
  width: 100%;
  height: 100%;
  background: none;
  border-width: 15px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.progress .progress-left .progress-bar{
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right{
  right: 0;
}
.progress .progress-right .progress-bar{
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: rgb(0, 0, 0);
  text-align: center;
  position: absolute;
}

------------------
add here below css
------------------

@keyframes loading-1{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
}
@keyframes loading-2{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(144deg);
      transform: rotate(144deg);
  }
}
@keyframes loading-3{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
}
@keyframes loading-4{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(36deg);
      transform: rotate(36deg);
  }
}
@keyframes loading-5{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(126deg);
      transform: rotate(126deg);
  }
}
@media only screen and (max-width: 990px){
  .progress{ margin-bottom: 20px; }
}

In this tutorial there are different different bars on the webpage with different percent, and when you refresh the page, the circle graph fills accroding to the percentage-based location.

These bars are fully responsive to any device like a tablet, mobiles, etc. In the case of this circular progress bar, you can pre-determine the percentage as needed.

Here I am going to show you how to make a simple CSS circle progress bar. below is the example of Circular Progress Bar.

HTML

<div class="progress blue">
    <span class="progress-left">
        <span class="progress-bar"></span>
    </span>
    <span class="progress-right">
        <span class="progress-bar"></span>
    </span>
    <div class="progress-value">90%</div>
</div>

CSS

.progress.blue .progress-bar{
  border-color: #26abfd;
}
.progress.blue .progress-left .progress-bar{
  animation: loading-2 1.5s linear forwards 1.8s;
}

Yellow Animated Circular progress bar

HTML

<div class="progress yellow">
    <span class="progress-left">
        <span class="progress-bar"></span>
    </span>
    <span class="progress-right">
        <span class="progress-bar"></span>
    </span>
    <div class="progress-value">90%</div>
</div>

CSS

.progress.yellow .progress-bar{
  border-color: #fdc426;
}
.progress.yellow .progress-left .progress-bar{
  animation: loading-3 1s linear forwards 1.8s;
}

Pink Animated Circular progress bar

HTML

<div class="progress pink">
    <span class="progress-left">
        <span class="progress-bar"></span>
    </span>
    <span class="progress-right">
        <span class="progress-bar"></span>
    </span>
    <div class="progress-value">20%</div>
</div>

CSS

.progress.pink .progress-bar{
  border-color: #f83754;
}
.progress.pink .progress-left .progress-bar{
  animation: loading-4 0.4s linear forwards 1.8s;
}

Green Animated Circular progress bar

HTML

<div class="progress green">
    <span class="progress-left">
        <span class="progress-bar"></span>
    </span>
    <span class="progress-right">
        <span class="progress-bar"></span>
    </span>
    <div class="progress-value">100%</div>
</div>

CSS

.progress.green .progress-bar{
  border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
  animation: loading-5 1.2s linear forwards 1.8s;
}

If you want to create a circular progress bar using HTML and CSS, then this tutorial will help you.

The circular progress bar is used to visualize the progress of work or an operation such as a completed work, download, file transfer, or installation.

Circular progress bar, circular progress bar CSS, create a Circular Progress Bar using HTML and CSS.

HTML

<div class="progress orange">
    <span class="progress-left">
        <span class="progress-bar"></span>
    </span>
    <span class="progress-right">
        <span class="progress-bar"></span>
    </span>
    <div class="progress-value">90</div>
</div>

CSS

<style type="text/css">
.progress{
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
  background: #fffccc;
  overflow: hidden;
  border-radius: 48px;
}
.progress:after{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span{
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left{
  left: 0;
}
.progress .progress-bar{
  width: 100%;
  height: 100%;
  background: none;
  border-width: 3px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.progress .progress-left .progress-bar{
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right{
  right: 0;
}
.progress .progress-right .progress-bar{
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
  width: 100%;
  height: 100%;
  font-weight:bold;
  font-size: 20px;
  color: #FF8918;
}
.progress.pink .progress-left .progress-bar{
  animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.orange .progress-bar{
  border-color: #ff9021;
}
.progress.orange .progress-left .progress-bar{
  animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
}
@keyframes loading-2{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(144deg);
      transform: rotate(144deg);
  }
}
@keyframes loading-3{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
}
@keyframes loading-4{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(36deg);
      transform: rotate(36deg);
  }
}
@keyframes loading-5{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(126deg);
      transform: rotate(126deg);
  }
}
</style>

A pure Html and CSS circular progress bar component to displays how much of the process is completed and how much is pending with animating an indicator along an invisible circular track in a clockwise direction.