CSS Radial Chart / Progress

A CSS / pure Javascript only radial chart/progressbar

by Rodrigo Portillo

HTML

<center><h1>CSS Radial Chart / Progress</h1></center>
<!--Created by Rodrigo Portillo-->
<!--https://velhobit.com.br-->
<div class="area">
  <!--This is the Structure of your chart-->
  <div class="chart">
    <div class="radio_chart" id="radioChartContent">
    </div>
    <div class="cap">
    </div>
    <div class="value" id="percentValue">
     0%
    </div>
  </div>
</div>

<!--This is just the example buttons-->
<div class="area">
  <button onclick="goTo(80)">
  Go To 80%
  </button>
  <button onclick="goTo(20)">
  Go To 20%
  </button>
  <button onclick="goTo(100)">
  Full
  </button>
  <button onclick="reset()">
  Reset
  </button>
</div>

CSS

/*Just to make it beautiful*/
body{
  background-color: #333;
  font-family: sans-serif;
}
h1{
  font-size:16px;
  color:white;
}
.area{
  display: flex;
  justify-content: center;
  padding: 20px;
}
.area button{
  margin: 0 10px;
  border-radius:3px;
  border: 1px solid #9a28fc;
  padding: 10px 15px;
  color: #9a28fc;
  background-color:transparent;
  cursor:pointer;
}
.area button:hover{
  border: 1px solid white;
  color: white;
}

/** Here comes the chart*/
.chart{
  position: relative;
  width:400px;
  height:400px;
  
  border-radius: 50%;
  background-color: #222;
  
  overflow:hidden;
}

.chart .radio_chart{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  
  position:absolute;
}

.chart .radio_chart.animate{
  animation-name: circled;
  animation-duration: 1s;
  animation-timing-function: linear;
  -moz-animation-name: circled;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -webkit-animation-name: circled;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  background: #a200ff;
}

.chart .cap{
  border-top: #666 3px solid;
  border-left: #666 2px solid;
  position:absolute;
  width: 100%;
  height: 100%;
  
  transform: scale(.8);
  
  background-color: #333;
  margin: 0 auto;
  border-radius:50%;
  
  box-shadow: 2px 2px 10px rgba(0,0,0,.5);
}

.chart .value{
  color: white;
  width:100%;
  height:100%;
  text-align: center;
  font-size:500%;
  top:37.5%;
  
  position:absolute;

  text-shadow: -2px -2px 5px #9a28fc, 2px 2px 5px #9a28fc, 0 0 50px #9a28fc;
}

/* The animation based on an hexagon
* its make the radial anim effet
*/
@keyframes circled {
    0%   {
       clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       clip-path: polygon(100% 0,...

JavaScript

/**
* This function allows you to go to an specific frame of the animation
* Remember the frames are a percentage number, so it goes from 0 to 100
**/
function goTo(frame){
	reset(); // Just reset
	
  //For some reason Javascript needs a time to remove animate class. I tried to use as callback from reset but it just didnt work. 
  setTimeout(function(){
  	//Get components
    var chart = document.getElementById("radioChartContent"), pVal = document.getElementById("percentValue");

		//Add animate
    chart.classList.add("animate");

    var currentPercent = 0; //Initial percentage

		//Get percentage one by one
    var currTimeout = setInterval(function(){
    	//Check is reach the limit
      if(currentPercent == frame || currentPercent > 100){
      		
          //Clear interval
          clearInterval(currTimeout);
          //Pause animation
          chart.style.animationPlayState = "paused";
          chart.style.webkitAnimationPlayState = "paused"; //if webkit
          
          return false;
        }else{
        	//Sum percentage
          currentPercent++;
          //show new percentage
          pVal.innerHTML = currentPercent+"%";
        }
    }, 10); //We are using 10 cause it reference by a 1 second (1000 miliseconds) animation. If you're using 4 seconds, change to 40 as  example
  },100);
}

//Reset to initial position
function reset(){
	var chart = document.getElementById("radioChartContent"), pVal = document.getElementById("percentValue");
  
  chart.classList.remove("animate");
  pVal.innerHTML = "0%";
  chart.style.animationPlayState = "initial";
  chart.style.webkitAnimationPlayState = "initial"; //if webkit
}