JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="progress-wrapper"></div>

CSS

.campaign_progress .progressbar,
.progress-wrapper{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 12px #e2e2e2;
    display: block;
    background: none;
}



.progress-circle {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.progress_meter,
.progress_value {
  fill: none;
}
.progress_meter {
  stroke: #e2e2e2;
}
.progress_value {
  stroke: #f3cd42;
  stroke-linecap: round;
}

JavaScript

var ProgressBar = function(parent, percent, Duration, Step){
	var defaultHTML = '<svg class="progress-circle" width="120" height="120" viewBox="0 0 120 120"> <circle class="progress_meter" cx="60" cy="60" r="54" stroke-width="12" /> <circle class="progress_value" cx="60" cy="60" r="54" stroke-width="12" /> </svg>',
  		radius = 54,
      circumference = 2 * Math.PI * radius,
      progressValue = null;
  		
	parent.innerHTML = defaultHTML;
	
  progressValue = parent.querySelector('.progress_value');
	progressValue.style.strokeDasharray = circumference + 'px';
	
	function Progress(value) {
		var progress = value / 100,
      	dashoffset = circumference * (1 - progress);
        
		progressValue.style.strokeDashoffset = dashoffset + 'px';
	}
	
  function easeOutQuart(x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	}
  
  function apply(){
  	var step = Step || 10,
    		duration = Duration || 500,
    		time = 0,
        startValue = 0,
        endValue = percent,
        changeInValue = endValue - startValue,
        counter = setInterval(frame, step);
        
		function frame(){
      if(time === duration){
        clearInterval(counter);
      } else {
        var newVal = easeOutQuart(null, time, startValue, changeInValue, duration);

        Progress(newVal);
        time+=step;
      }
    }
        
  };
  
	apply();
}

ProgressBar(document.querySelector('.progress-wrapper'), 74, 700);