SVG Download Progress

index.html

<div id="container">

<svg version="1.1"
	 width="180px" height="180px" viewBox="0 0 180 180">
<defs>
  
<filter id="glow" y="-50%" height="180%">
    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter> 
  
<filter id="glow2" y="-50%" height="180%">
    <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>    
</defs>
  
  <g filter="url(#glow)">
<path id="outline" fill="none" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M90.5,161C51.6,161,20,129.4,20,90.5S51.6,20,90.5,20S161,51.6,161,90.5S129.4,161,90.5,161"/>
<path id="outline_bg" fill="none" opacity="0.02" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M90.5,161C51.6,161,20,129.4,20,90.5S51.6,20,90.5,20S161,51.6,161,90.5S129.4,161,90.5,161"/>  
<path id="tick" fill="none" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M128.9,58l-37,64.1L47.1,93.2"/>
  
  </g>
  <text  filter="url(#glow2)" class="loading" x="51%" y="105">0%</text> 
</svg>
 
</div>

script.js

var container = document.getElementById('container');
var outline = document.getElementById('outline');
var loading = document.querySelector('.loading');

TweenMax.set([container, 'svg'], {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
})

var tl = new TimelineMax({repeatDelay:0.51, repeat:-1});
tl.timeScale(1.3);
tl.set(tick, {
  drawSVG:'58% 58%',
  alpha:0
})
tl.to(outline, 4, {
  drawSVG:'49.9% 50.1%',
  onUpdate:function(){
    loading.textContent = Math.floor((tl.time()/4) * 100) + '%';
  },
  ease:Linear.easeNone
})

.to(outline, 0.4, {
  y:'-=10',
  ease:Power1.easeOut
}, '-=0.05')

.to(outline, 0.4, {
  y:'+=108',
  ease:Power2.easeIn
})

.to(loading, 0.4, {
  alpha:0,
  ease:Power2.easeIn
}, '-=0.4')
.set(outline, {
  alpha:0
})

.set(tick, {
  alpha:1
})
.to(tick, 0.4, {
  drawSVG:'7% 87%',
  y:'-=3',
  ease:Back.easeOut.config(2)
})

.to(tick, 0.6, {
  alpha:0,
  delay:1
})

.set(outline, {
  y:0,
  alpha:1
})
.to(outline, 1, {
  drawSVG:true,
  ease:Power3.easeInOut
})
.to(loading, 1, {
  onStart:function(){
    loading.textContent = '0%'
  },
  alpha:1,
  ease:Power3.easeInOut
}, '-=0.5');

//TweenMax.globalTimeScale(0.5)

scripts

<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

style.css

body{
  background-color:#394F59;
  overflow:hidden;
}
body, html, #container {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

text{
  position:absolute;
  font-family: 'Open Sans Condensed', sans-serif;
  fill:#ededed;
  font-size:36px;
  text-anchor:middle;
  font-weight:700;

}

svg-download-progress.markdown

SVG Download Progress

And this is what happens when it all goes wrong http://codepen.io/chrisgannon/details/wBOVKV/

A Pen by Chris Gannon on CodePen.

License.