<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);
	  }
	});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js