<div class="btn-circle-download">
  <svg id="arrow" width="14px" height="20px" viewBox="17 14 14 20">
    <path d="M24,15 L24,32"></path>
    <polyline points="30 27 24 33 18 27"></polyline>
  </svg>
  <svg id="check" width="21px" height="15px" viewBox="13 17 21 15">
    <polyline points="32.5 18.5 20 31 14.5 25.5"></polyline>
  </svg>
  <svg  id="border" width="48px" height="48px" viewBox="0 0 48 48">
    <path d="M24,1 L24,1 L24,1 C36.7025492,1 47,11.2974508 47,24 L47,24 L47,24 C47,36.7025492 36.7025492,47 24,47 L24,47 L24,47 C11.2974508,47 1,36.7025492 1,24 L1,24 L1,24 C1,11.2974508 11.2974508,1 24,1 L24,1 Z"></path>
  </svg>
</div>

<!-- dribbble -->
<a class="credit" href="https://dribbble.com/shots/4525196-Jelly-Download" target="_blank"><img src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>

$color: #0077FF

html, body
  height: 100%

body
  display: grid
  overflow: hidden

.btn-circle-download
  position: relative
  height: 48px
  width: 48px
  margin: auto
  border-radius: 100%
  background: #E8EAED
  cursor: pointer
  overflow: hidden
  transition: all .2s ease
  &:after
    content: ""
    position: relative
    display: block
    width: 200%
    height: 100%
    background-image: linear-gradient(100deg, rgba(white,0), rgba(white,.25),rgba(white,0))
    transform: translateX(-100%)
  svg
    stroke-width: 2
    stroke-linecap: round
    stroke-linejoin: round
    fill: none
    &#border
      position: absolute
      top: 0
      left: 0
      stroke: none
      stroke-dasharray: 144
      stroke-dashoffset: 144
      transition: all .9s linear
    &#arrow
      position: absolute
      top: 14px
      left: 17px
      stroke: #9098A9
      transition: all .2s ease
    &#check
      position: absolute
      top: 17px
      left: 13px
      stroke: white
      transform: scale(0)
  &:hover
    background: rgba($color,.2)
    #arrow
      path,
      polyline
        stroke: $color
  &.load
    background: rgba($color,.2)
    #arrow
      path,
      polyline
        stroke: $color
    #border
      stroke: $color
      stroke-dasharray: 144
      stroke-dashoffset: 0
  &.done
    background: $color
    animation: rubberBand .8s
    &:after
      transform: translateX(50%)
      transition: transform .4s ease
      transition-delay: .7s
    #border,
    #arrow
      display: none
    #check
      transform: scale(1)
      transition: all .2s ease
      transition-delay: .2s

@keyframes rubberBand
  from
    transform: scale(1, 1, 1)
  30%
    transform: scale3d(1.15, 0.75, 1)
  40%
    transform: scale3d(0.75, 1.15, 1)
  50%
    transform: scale3d(1.10, 0.85, 1)
  65%
    transform: scale3d(.95, 1.05, 1)
  75%
    transform: scale3d(1.05, .95, 1)
  to
    transform: scale3d(1, 1, 1)
    
//dribbble 
.credit
  position: fixed
  right: 20px
  bottom: 20px
  transition: all .2s ease
  -webkit-user-select: none
  user-select: none
  opacity: .6
  img
    width: 72px
  &:hover
    transform: scale(.95)

$(".btn-circle-download").click(function() {
  $(this).addClass("load");
  setTimeout(function() {
    $(".btn-circle-download").addClass("done");
  }, 1000);
  setTimeout(function() {
    $(".btn-circle-download").removeClass("load done");
  }, 5000);
});