<div class="container">
	<div class="download">
		<i class="fa fa-download"></i>
		<span>Download</span>
	</div>
</div>
<div class="load">
	<div class="inner">
	</div>
</div>
html,
body {
	margin: 0;
	height: 100%;
}

body {
	background: #36D6D6;
	background: linear-gradient(35deg, #36D6D6, #D63636);
	background-attachment: fixed;
	background-size: cover;
	padding: 50px;
	font-family: sans-serif;
	box-sizing: border-box;
	font-weight: 100;
}

.container {
	width: 240px;
	height: 100px;
	margin: 50px auto;
	cursor: pointer;
}

.download {
	font-size: 20px;
	color: #fff;
	background: #36D659;
	padding: 20px;
	width: 200px;
	transition: 1s ease;
	margin: 30px 0 0 0;
}

span {
	margin-left: 50px;
}

.container:hover .download {
	transform: rotate(360deg);
}

.download:active {
	background: #25953E;
}

.load {
	background: transparent;
	background: RGBa(0, 0, 0, 0.2);
	width: 200px;
	height: 10px;
	margin: 10px auto;
	display: none;
}

.inner {
	width: 5%;
	height: 10px;
	border-radius: 3px;
	background: #333;
	transition: 0.25s ease, 7s background;
}
$(document).ready(function() {
	$(".download").on("click", function() {
		$(".load").css("display", "block");
		setTimeout(function() {
			$(".inner").css("width", "90px");
			$(".inner").css("background", "#36D659");
		}, 1000);
		setTimeout(function() {
			$(".inner").css("width", "150px");
		}, 2000);
		setTimeout(function() {
			$(".inner").css("width", "200px");
		}, 3000);
		setTimeout(function() {
			$(".download").css("background", "transparent");
			$(".download").html("Complete :)");

		}, 3400);
		$(this).css("background", "#A8C1BA");
		$(this).css("text-align", "center");
		$(this).html("Downloading...");
      
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js