<div class="buttonContainer">
<div class="complete">Download complete</div>
<div class="ball"></div>
<svg width="182" height="61" xmlns="http://www.w3.org/2000/svg">
<path id="button" d="m31.048188,4.720621l120.048623,0l0,0c15.726711,0 28.475699,11.640603 28.475699,26.000007c0,14.359399 -12.748994,25.999997 -28.475699,25.999997l-120.048623,0l0,0c-15.726693,0 -28.475699,-11.640598 -28.475699,-25.999997c0,-14.359409 12.749006,-26.000007 28.475699,-26.000007z" stroke-width="4" stroke="#e91d62" fill="none"/>
</svg>
<div id="counter">0</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
$background:#373e46;
$buttoncolor:#e91d62;
$contrastcolor:#f9f9f9;
$ballcolor:#e91d62;
$animationtempo:2s; //2.2s
$transition:cubic-bezier(0.16, 0.15, 1, 0.49);
body{
font-family: 'Nunito', sans-serif;
background: $background;
}
#loading_line{
width:0px;
height: 5px;
background:blue;
}
.buttonContainer{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
cursor: pointer;
.complete{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
transform: scale(1.9);
color:$contrastcolor;
transition: all .3s ease;
opacity:0;
&.fadein{
opacity:1;
transform: scale(1.5);
}
}
#counter{
color: $buttoncolor;
font-size: 19px;
left:0;
right:0;
bottom: 20px;
margin:auto;
display: none;
position:absolute;
}
.ball{
position: absolute;
left:0;
right:0;
top:-26px;
margin:auto;
width: 40px;
height: 40px;
border-radius: 40px;
background-color:$ballcolor;
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255,0.54);
display:none;
}
&:before{
content: "Download";
display:block;
text-transform: uppercase;
color: $buttoncolor;
font-weight: 700;
font-size: 13px;
transform: translateY(38px);
transition: all .2s ease;
}
&.active{
pointer-events:none;
&:before{
opacity:0;
}
.ball{
animation: jump $animationtempo $transition infinite;
}
#button{
stroke-dashoffset: 290;
width:300px;
stroke-width:9;
animation: struk $animationtempo $transition infinite;
}
}
#button{
stroke-dasharray: 411;
stroke-dashoffset: 0;
marker-start: 30;
transform-origin: 50% 50%;
transition: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
}
//Keyframes
@keyframes jump{
0%{transform:translateY(0%);}
10%{transform:translateY(-180%);}
18%{width: 40px; height: 40px;}
20%{transform:translateY(10%); width: 48px; height: 32px;}
22%{width: 40px; height: 40px;}
30%{transform:translateY(-90%);}
38%{width: 40px; height: 40px;}
40%{transform:translateY(5%); width: 44px; height: 36px;}
42%{width: 40px; height: 40px;}
49%{transform:translateY(-40%);}
57%{transform:translateY(0%);}
65%{transform:translateY(-10%);}
70%{transform:translateY(0%);}
}
@keyframes struk{
18%{transform:translateY(0%);}
20%{transform:translateY(10%);}
22%{transform:translateY(0%);}
38%{transform:translateY(0%);}
40%{transform:translateY(5%);}
42%{transform:translateY(0%);}
}
View Compiled
$('.buttonContainer').click(function(){
if($('.buttonContainer').hasClass('active')){
$(this).removeClass('active');
$('.complete').removeClass('fadein');
$('#counter').fadeOut(100);
$('.ball').fadeOut(100);
count().stop;
} else{
$(this).addClass('active');
$('#counter').fadeIn(200);
$('.ball').fadeIn(200);
count();
}
});
//Loading
function count(){
$({countNum: $('#counter').text()}).animate({countNum: 100}, {
duration: 5000,
easing:'linear',
step: function() {
$('#counter').text(Math.floor(this.countNum) + '%');
},
complete: function() {
$('#counter').fadeOut(200);
$('.complete').addClass('fadein');
$('.ball').fadeOut(200);
$('#button').fadeOut(100);
setTimeout(function() {
$('.buttonContainer').removeClass('active');
$('.complete').removeClass('fadein');
$('#button').fadeIn(200);
}, 1000);
}
});
}
This Pen doesn't use any external CSS resources.