And this is what happens when it all goes wrong http://codepen.io/chrisgannon/details/wBOVKV/
A Pen by Chris Gannon on CodePen.
<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> |
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) |
<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> |
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; | |
} |
And this is what happens when it all goes wrong http://codepen.io/chrisgannon/details/wBOVKV/
A Pen by Chris Gannon on CodePen.