<header>
  <h1>css3+js download button</h1>
  <h5>click on the button to see the magic</h5></header>
<div class="download-btn">
  <div class="btn__circle"> <svg width="140" height="140"> 
     <circle r="60" cx="70" cy="70"
             class='download' stroke-width="10" />
    </circle>
  <circle class="bar" stroke-width="10" r="60" cx="70" cy="70" fill="transparent" stroke ='red' stroke-dasharray="565.48" stroke-dashoffset="565.48"></circle>
    
</svg>
  </div>

  <div class="btn__arrow btn--icon"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
  <div class="btn__stop btn--icon"><i class="fa fa-pause" aria-hidden="true"></i></div>
  <div class="btn__done btn--icon"><i class="fa fa-check" aria-hidden="true"></i></div>
</div>

//fonts
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,700,900');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
//vars
$main-color: #028EFF;
$done-color: #3bc27a;
$stroke-outer: #D1EAFE;
$button-fill: #fff;
//main
body {
  background-color: #333;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  overflow-x: hidden;
  text-align: center;
}

h1 {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

h5 {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-weight: 100;
}
.download-btn{
  cursor: pointer;
  display: inline-block;
}
.download {
  fill: $main-color;
  stroke: $main-color;
  stroke-dashoffset: 10%;
}
.download--animate {
  animation: circle-animate-1 2s forwards, circle-animate-2 .5s 4s forwards;
}
.download-btn {
  position: relative;
  height: 140px;
  width: 140px;
}
.bar {
  stroke: $main-color;
}
.bar--animate {
  animation-name: bar-animate;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}
.btn--icon {
  transition: .3s;
  position: absolute;
  font-size: 54px;
  left: 47px;
  top: 40px;
}
.btn__arrow {
  color: $button-fill;
  opacity: 1;
}
.btn__arrow--animate {
  animation-name: arrow-animate;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.btn__stop {
  color: $main-color;
  opacity: 0;
}
.btn__stop--animate {
  animation-name: stop-animate;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
.btn__done {
  color: $button-fill;
  opacity: 0;
}
.btn__done--animate {
  animation-name: done-animate;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
}
@keyframes arrow-animate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
  }
}
@keyframes stop-animate {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
  }
}
@keyframes done-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes circle-animate-1 {
  0% {
    fill: $main-color;
    stroke: $main-color;
  }
  100% {
    fill: $button-fill;
    stroke: $stroke-outer;
  }
}
@keyframes circle-animate-2 {
  0% {
    fill: $button-fill;
    stroke: $stroke-outer;
  }
  100% {
    fill: $done-color;
    stroke: $done-color;
  }
}
@keyframes bar-animate {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    stroke-dashoffset: 565px;
  }
  5% {
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 450px;
  }
  50% {
    stroke-dashoffset: 350px;
  }
  75% {
    stroke-dashoffset: 250px;
  }
  99% {
    stroke-dashoffset: 20px;
    stroke: $main-color;
  }
  100% {
    stroke-dashoffset: 5px;
    stroke: $done-color;
  }
}

//animation trigger on click
$(".download-btn").click(function() {
  $(".download").toggleClass("download--animate");
  $(".bar").toggleClass("bar--animate");
  $(".btn__arrow").toggleClass("btn__arrow--animate");
  $(".btn__stop").toggleClass("btn__stop--animate");
  $(".btn__done").toggleClass("btn__done--animate");
});