Overwatch Ultimate Bar

HTML

<div class="box">
  <svg viewBox="0 0 159.7 159.7">
    <circle class="outsideLine" cx="79.8" cy="79.8" r="74.3"></circle>
    <circle class="behindCircle" cx="79.8" cy="79.8" r="74.3"></circle>
    <circle class="experienceBar" cx="79.8" cy="79.8" r="74.3"></circle>
    <circle class="overlay" cx="79.8" cy="79.8" r="74.3"></circle>
    <circle class="innerCircle" cx="79.8" cy="79.8" r="74.3"></circle>
  </svg>
  <span class="per">
    <span class="numb">0</span>%
  </span>
</div>

SCSS

.box{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.per{
   position: absolute;
   font-family: arial;
   color:rgba(0, 0, 0, 0.5);
   font-weight:bold;
   .numb{
     font-size: 60px;
   }
}

svg{
  width:100%;
  max-width:500px;
  circle{
    fill:none;
    stroke:red;
    &.outsideLine{
     stroke: rgba(0, 0, 0, 0.07);
     stroke-width: 1;
    }
    &.behindCircle{
      transform: scale(0.64);
      stroke-width: 15px;
      transform-origin: center;
      stroke-dasharray: 10, 3;
      stroke: rgba(0, 0, 0, 0.1);
    }
    &.experienceBar{
      transform: scale(0.61) rotate(-90deg);
      stroke: #ffd100;
      stroke-width: 23px;
      stroke-dasharray: 0, 467;
      transform-origin: center;
      transition:all 0.3s linear;
    }
    &.overlay{
      transform: scale(0.61) rotate(8deg);
      stroke-dasharray: 3, 10;
      stroke: #f3f5f6;
      stroke-width: 24px;
      transform-origin: center;
    }
    &.innerCircle{
      transform: scale(0.42) rotate(10deg);
      stroke-width: 15px;
      transform-origin: center;
      stroke-dasharray: 23, 3;
      stroke: rgb(236, 184, 6);
    }
  }
}

JavaScript

$(function(){
	
  //Namen later nog aanpassen + functions maken

  var cTotal 		= 467, // The total length of the yellow circle;
      cCurrent 	= 0, // The begin of the length of the yellow circle.
      
      percent		= 0, // The start percentage. Default 0
      steps			= 3, // Max 5
      speed			= 1000, //Minimal 1000
      volume		= 0.5, // Folume 1 = max, 0 = audio off.
      random		= Math.floor(Math.random() * 2) + 1,
      sound 		= new Audio("http://jewelbeast.nl/sounds/overwatchMusic"+random+".mp3"),
      runned		= false,
      ulti			= new Audio("http://jewelbeast.nl/sounds/ultimate.mp3"),
      complete 	= new Audio("http://jewelbeast.nl/sounds/levelup.mp3");	
      
  sound.play();
  sound.volume = volume;

  var exp = setInterval(function(){

    percent = percent + steps;
    $(".per .numb").html(percent);

    cCurrent = cCurrent + ((cTotal / 100) * steps);
    $(".experienceBar").css({"stroke-dasharray": ""+ cCurrent +", 467"});

    if(percent >= 100){
      clearInterval(exp);
      $(".per .numb").html("100");
      complete.play();
      sound.volume = 0.1;
      setTimeout(function(){
      	sound.volume = volume;
      }, 3000);
    }
    
    if(percent >= 75 && runned === false){
      ulti.play();
      sound.volume = 0.1;
      runned = true;
      setTimeout(function(){
        sound.volume = volume;
      }, 4000);
    }

  }, speed);
  
});