Use CSS and SVG Path to create Circular Progress Bar with animation - HTML CSS SVG

HTML CSS examples for SVG:Path

  1. HOME
  2. HTML CSS
  3. SVG
  4. Path

Description

Use CSS and SVG Path to create Circular Progress Bar with animation

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

@-webkit-keyframes load {<!-- w w w .  j a  v  a2 s . co  m-->
   0% {
      stroke-dashoffset: 629
   }
}
@-moz-keyframes load {
   0% {
      stroke-dashoffset: 629
   }
}
@keyframes load {
   0% {
      stroke-dashoffset: 629
   }
}

.progress {
   position: relative;
   display: inline-block;
   padding: 0;
   text-align: center;
}

.progress svg {
   width: 4rem;
   height: 4rem;
}
.progress svg:nth-child(2) {
   position: absolute;
   left: 0;
   top: 0;
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) circle {
   fill: none;
   stroke-width: 20;
   stroke-dasharray: 629;
   stroke: #ff1251;
   stroke-linecap:round;
   -webkit-animation: load 8s;
   -moz-animation: load 8s;
   -o-animation: load 8s;
   animation: load 8s;
}
.pulse {
   border-radius: 50%;
   width: 18px;
   height: 18px;
   background: #ff1251;
   position: absolute;
   top: 1.45rem;
   left: 1.45rem;
   -webkit-animation: pulse 1.6s linear infinite alternate;
}
@keyframes "pulse" {
   0% {
      transform: scale(0.8);
   }
   20% {
      transform: scale(1);
   }
   100% {
      transform: scale(1);
   }
}
@-moz-keyframes pulse {
   0% {
      -moz-transform: scale(1);
      transform: scale(1);
   }
   50% {
      -moz-transform: scale(0.8);
      transform: scale(0.8);
   }
   100% {
      -moz-transform: scale(1);
      transform: scale(1);
   }
}
@-webkit-keyframes "pulse" {
   0% {
      transform: scale(0.8);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(1);
   }
}
@-ms-keyframes "pulse" {
   0% {
      -ms-transform: scale(1);
      transform: scale(1);
   }
   50% {
      -ms-transform: scale(0.8);
      transform: scale(0.8);
   }
   100% {
      -ms-transform: scale(1);
      transform: scale(1);
   }
}


      </style> 
 </head> 
 <body> 
  <div class="progress"> 
   <svg viewbox="-10 -10 220 220"> 
    <g fill="none" stroke-width="20" transform="translate(100,100)"> 
     <path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="rgb(90,99,121)" stroke-linejoin="round" /> 
    </g> 
   </svg> 
   <svg viewbox="-10 -10 220 220"> 
    <circle r="100" cx="100" cy="100" stroke-dashoffset="0" /> 
   </svg> 
   <div class="pulse"></div> 
  </div>  
 </body>
</html>

Related Tutorials