Прогресс бар скачивания файла

(function() { 
  // https://dribbble.com/shots/2654081-Download-icon-progress 
  var $svg, check, circleEmpty, circleFull, i, reset, shrink, t, to; 
 
  $svg = $('svg'); 
 
  to = null; 
 
  t = function(ms, cb, fn) { 
    return to = setTimeout(function() { 
      fn(); 
      return cb(); 
    }, ms); 
  }; 
 
  shrink = function(cb) { 
    return t(0, cb, function() { 
      return $svg.attr("class", "shrink"); 
    }); 
  }; 
 
  circleEmpty = function(cb) { 
    return t(300, cb, function() { 
      return $svg.attr("class", "circle-empty"); 
    }); 
  }; 
 
  circleFull = function(cb) { 
    return t(700, cb, function() { 
      return $svg.attr("class", "circle-full"); 
    }); 
  }; 
 
  check = function(cb) { 
    return t(2000, cb, function() { 
      return $svg.attr("class", "check"); 
    }); 
  }; 
 
  reset = function(cb) { 
    return t(3000, cb, function() { 
      return $svg.attr("class", null); 
    }); 
  }; 
 
  $svg.click(function() { 
    clearInterval(i); 
    if ($svg.attr("class") != null) { 
      $svg.attr('class', null).clearQueue(); 
      return clearTimeout(to); 
    } else { 
      return $svg.queue(shrink).queue(circleEmpty).queue(circleFull).queue(check).queue(reset); 
    } 
  }); 
 
  $svg.on('mouseenter mouseover', function() { 
    return clearInterval(i); 
  }); 
 
  i = setInterval(function() { 
    return $svg.click(); 
  }, 15000); 
 
}).call(this); 
 
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTtBQUFBLE1BQUEsSUFBQSxFQUFBLEtBQUEsRUFBQSxXQUFBLEVBQUEsVUFBQSxFQUFBLENBQUEsRUFBQSxLQUFBLEVBQUEsTUFBQSxFQUFBLENBQUEsRUFBQTs7RUFFQSxJQUFBLEdBQU8sQ0FBQSxDQUFFLEtBQUY7O0VBRVAsRUFBQSxHQUFLOztFQUVMLENBQUEsR0FBSSxRQUFBLENBQUMsRUFBRCxFQUFLLEVBQUwsRUFBUyxFQUFULENBQUE7V0FDRixFQUFBLEdBQUssVUFBQSxDQUFXLFFBQUEsQ0FBQSxDQUFBO01BQ2QsRUFBQSxDQUFBO2FBQ0EsRUFBQSxDQUFBO0lBRmMsQ0FBWCxFQUdILEVBSEc7RUFESDs7RUFNSixNQUFBLEdBQVMsUUFBQSxDQUFDLEVBQUQsQ0FBQTtXQUFRLENBQUEsQ0FBRSxDQUFGLEVBQUssRUFBTCxFQUFTLFFBQUEsQ0FBQSxDQUFBO2FBQUcsSUFBSSxDQUFDLElBQUwsQ0FBVSxPQUFWLEVBQW1CLFFBQW5CO0lBQUgsQ0FBVDtFQUFSOztFQUNULFdBQUEsR0FBYyxRQUFBLENBQUMsRUFBRCxDQUFBO1dBQVEsQ0FBQSxDQUFFLEdBQUYsRUFBTyxFQUFQLEVBQVcsUUFBQSxDQUFBLENBQUE7YUFBRyxJQUFJLENBQUMsSUFBTCxDQUFVLE9BQVYsRUFBbUIsY0FBbkI7SUFBSCxDQUFYO0VBQVI7O0VBQ2QsVUFBQSxHQUFhLFFBQUEsQ0FBQyxFQUFELENBQUE7V0FBUSxDQUFBLENBQUUsR0FBRixFQUFPLEVBQVAsRUFBVyxRQUFBLENBQUEsQ0FBQTthQUFHLElBQUksQ0FBQyxJQUFMLENBQVUsT0FBVixFQUFtQixhQUFuQjtJQUFILENBQVg7RUFBUjs7RUFDYixLQUFBLEdBQVEsUUFBQSxDQUFDLEVBQUQsQ0FBQTtXQUFRLENBQUEsQ0FBRSxJQUFGLEVBQVEsRUFBUixFQUFZLFFBQUEsQ0FBQSxDQUFBO2FBQUcsSUFBSSxDQUFDLElBQUwsQ0FBVSxPQUFWLEVBQW1CLE9BQW5CO0lBQUgsQ0FBWjtFQUFSOztFQUNSLEtBQUEsR0FBUSxRQUFBLENBQUMsRUFBRCxDQUFBO1dBQVEsQ0FBQSxDQUFFLElBQUYsRUFBUSxFQUFSLEVBQVksUUFBQSxDQUFBLENBQUE7YUFBRyxJQUFJLENBQUMsSUFBTCxDQUFVLE9BQVYsRUFBbUIsSUFBbkI7SUFBSCxDQUFaO0VBQVI7O0VBRVIsSUFBSSxDQUFDLEtBQUwsQ0FBVyxRQUFBLENBQUEsQ0FBQTtJQUNULGFBQUEsQ0FBYyxDQUFkO0lBQ0EsSUFBRywwQkFBSDtNQUNFLElBQUksQ0FBQyxJQUFMLENBQVUsT0FBVixFQUFtQixJQUFuQixDQUF3QixDQUFDLFVBQXpCLENBQUE7YUFDQSxZQUFBLENBQWEsRUFBYixFQUZGO0tBQUEsTUFBQTthQUlFLElBQ0UsQ0FBQyxLQURILENBQ1MsTUFEVCxDQUVFLENBQUMsS0FGSCxDQUVTLFdBRlQsQ0FHRSxDQUFDLEtBSEgsQ0FHUyxVQUhULENBSUUsQ0FBQyxLQUpILENBSVMsS0FKVCxDQUtFLENBQUMsS0FMSCxDQUtTLEtBTFQsRUFKRjs7RUFGUyxDQUFYOztFQWFBLElBQUksQ0FBQyxFQUFMLENBQVEsc0JBQVIsRUFBZ0MsUUFBQSxDQUFBLENBQUE7V0FDOUIsYUFBQSxDQUFjLENBQWQ7RUFEOEIsQ0FBaEM7O0VBR0EsQ0FBQSxHQUFJLFdBQUEsQ0FBWSxRQUFBLENBQUEsQ0FBQTtXQUNkLElBQUksQ0FBQyxLQUFMLENBQUE7RUFEYyxDQUFaLEVBRUYsS0FGRTtBQWxDSiIsInNvdXJjZXNDb250ZW50IjpbIiMgaHR0cHM6Ly9kcmliYmJsZS5jb20vc2hvdHMvMjY1NDA4MS1Eb3dubG9hZC1pY29uLXByb2dyZXNzXG5cbiRzdmcgPSAkKCdzdmcnKVxuXG50byA9IG51bGxcblxudCA9IChtcywgY2IsIGZuKSAtPlxuICB0byA9IHNldFRpbWVvdXQgLT5cbiAgICBmbigpXG4gICAgY2IoKVxuICAsIG1zXG5cbnNocmluayA9IChjYikgLT4gdCgwLCBjYiwgLT4gJHN2Zy5hdHRyKFwiY2xhc3NcIiwgXCJzaHJpbmtcIikpXG5jaXJjbGVFbXB0eSA9IChjYikgLT4gdCgzMDAsIGNiLCAtPiAkc3ZnLmF0dHIoXCJjbGFzc1wiLCBcImNpcmNsZS1lbXB0eVwiKSlcbmNpcmNsZUZ1bGwgPSAoY2IpIC0+IHQoNzAwLCBjYiwgLT4gJHN2Zy5hdHRyKFwiY2xhc3NcIiwgXCJjaXJjbGUtZnVsbFwiKSlcbmNoZWNrID0gKGNiKSAtPiB0KDIwMDAsIGNiLCAtPiAkc3ZnLmF0dHIoXCJjbGFzc1wiLCBcImNoZWNrXCIpKVxucmVzZXQgPSAoY2IpIC0+IHQoMzAwMCwgY2IsIC0+ICRzdmcuYXR0cihcImNsYXNzXCIsIG51bGwpKVxuXG4kc3ZnLmNsaWNrIC0+XG4gIGNsZWFySW50ZXJ2YWwoaSlcbiAgaWYgJHN2Zy5hdHRyKFwiY2xhc3NcIik/XG4gICAgJHN2Zy5hdHRyKCdjbGFzcycsIG51bGwpLmNsZWFyUXVldWUoKVxuICAgIGNsZWFyVGltZW91dCh0bylcbiAgZWxzZVxuICAgICRzdmdcbiAgICAgIC5xdWV1ZShzaHJpbmspXG4gICAgICAucXVldWUoY2lyY2xlRW1wdHkpXG4gICAgICAucXVldWUoY2lyY2xlRnVsbClcbiAgICAgIC5xdWV1ZShjaGVjaylcbiAgICAgIC5xdWV1ZShyZXNldClcblxuJHN2Zy5vbiAnbW91c2VlbnRlciBtb3VzZW92ZXInLCAtPlxuICBjbGVhckludGVydmFsKGkpXG4gICAgICBcbmkgPSBzZXRJbnRlcnZhbCAtPlxuICAkc3ZnLmNsaWNrKClcbiwgMTUwMDBcbiJdfQ== 
//# sourceURL=coffeescript

svg { 
  cursor: pointer; 
  position: absolute; 
  width: 196px; 
  height: 196px; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
} 
svg path { 
  fill: none; 
  stroke-width: 2; 
  stroke-linecap: round; 
  stroke-linejoin: round; 
} 
svg #line { 
  stroke: #999; 
  stroke-dasharray: 45, 0, 45, 999; 
  stroke-dashoffset: -140; 
  transition-property: all; 
  transition-timing-function: ease; 
  transition-duration: 0.7s; 
} 
svg.shrink #line { 
  stroke-dasharray: 1, 87, 1, 999; 
  stroke-dashoffset: -140; 
  transition-duration: 0.3s; 
  transition-timing-function: cubic-bezier(0.25, -0.25, 0.75, 1.25); 
} 
svg.check #line { 
  stroke-dasharray: 9, 340, 24, 999; 
  stroke-dashoffset: 0; 
  transition-timing-function: cubic-bezier(0.25, -0.25, 0.75, 1.25); 
  transition-duration: 0.5s; 
} 
svg.circle-full #line { 
  stroke-dasharray: 75, 127, 75, 999; 
  stroke-dashoffset: -45; 
  transition-timing-function: linear; 
  transition-duration: 2s; 
} 
svg.circle-empty #line { 
  stroke-dasharray: 1, 127, 1, 999; 
  stroke-dashoffset: -119; 
  transition-duration: 0.3s; 
  transition-timing-function: cubic-bezier(0.25, -0.25, 0.75, 1.25); 
} 
svg #circle-bg { 
  stroke: #eee; 
  transform: scale(1); 
  transform-origin: 50%; 
} 
svg #circle-hover { 
  opacity: 0; 
  stroke: #0ebeff; 
  transition: opacity 0.1s ease; 
} 
svg:hover #circle-hover, 
svg.shrink #circle-hover, 
svg.check #circle-hover, 
svg.circle-full #circle-hover, 
svg.circle-empty #circle-hover { 
  opacity: 1; 
} 
svg.shrink #circle-bg { 
  transform: scale(1.3); 
  transform-origin: 50%; 
  transition-duration: 0.2s; 
  stroke: #aaa; 
  opacity: 0; 
} 
html, 
body { 
  height: 100%; 
  background-color: #f5f6f7; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<svg viewBox="0 0 64 64"> 
  <path id="circle-bg" d=" 
    M 32,  8 
    C 45,  8  56, 19  56, 32 
    C 56, 45  45, 56  32, 56 
    C 19, 56   8, 45   8, 32 
    C  8, 19  19,  8  32,  8 
    Z 
  "></path> 
  <path id="circle-hover" d=" 
    M 32,  8 
    C 45,  8  56, 19  56, 32 
    C 56, 45  45, 56  32, 56 
    C 19, 56   8, 45   8, 32 
    C  8, 19  19,  8  32,  8 
    Z 
  "></path> 
  <path id="line" d=" 
    M 28, 41 
    L 22, 34 
    C 11, 21  19,  8  32,  8 
    C 45,  8  56, 19  56, 32 
    C 56, 45  45, 56  32, 56 
    C 19, 56  28, 44  31, 47 
    C 32, 48  32, 48  33, 47 
    L 41, 38 
    C 42, 37  42, 36  41, 36 
    L 35, 36 
    L 35, 16 
    L 29, 16 
    L 29, 36 
    L 23, 36 
    C 22, 36  22, 37  23, 38 
    L 31, 47 
    C 32, 48  32, 48  33, 47 
 
    C 35, 45  45, 56  32, 56 
    C 19, 56   8, 45   8, 32 
    C  8, 19  19,  8  32,  8 
    C 45,  8  51, 17  44, 24 
    Z 
  "></path> 
</svg>