Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 29, 2016 09:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/018443cd715fa90b29ff1372b9668867 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/018443cd715fa90b29ff1372b9668867 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Download Progress
Raw
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>
Raw
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)
Raw
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>
Raw
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;
}
Raw
svg-download-progress.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment