Display loader while loading page using CSS & jQuery

In many situations you want to show loader to users while page is loading. After loading this page this loading icon/image should be gone away. You can use below snippet for this, in which i am using css animation for producing look of progress ring of windows 8. However you can use any image/icon.

Add this in starting of your HTML file.

<div class="loader">
	<div class="loader_bar">
		<div class='loader_circle'></div>
		<div class='loader_circle'></div>
		<div class='loader_circle'></div>
		<div class='loader_circle'></div>
		<div class='loader_circle'></div>
	</div>
	<div class="hide_loader">Hide</div>
</div>

Add below code in your CSS file. If you are willing to using Image then you can omit keyframes. Here i am using keyframes because i am using animation instead of image, because image may take more time to load then css animation.

.loader{cursor:wait;position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: #03B3B2;}
.loader .hide_loader{cursor:pointer;position: fixed;right: 10px;top: 10px;z-index: 100;color: #fff;font-size: 120%;font-weight: bold;}
.loader_bar {width: 80px;margin: auto;position: fixed; left: 50%;top:50%; transform: translate(-50%, -50%);}

.loader_bar .loader_circle {position: absolute;width: 50px;height: 50px;opacity: 0;transform: rotate(225deg);animation-iteration-count: infinite;animation-name: orbit;animation-duration: 5.5s;text-align: center;width: 100%; transform: translate(-50%, -150%);}
.loader_bar .loader_circle:after {content: '';position: absolute;width: 5px;height: 5px;border-radius: 5px;background: #FFF;}
.loader_bar .loader_circle:nth-child(2) {animation-delay: 240ms;}
.loader_bar .loader_circle:nth-child(3) {animation-delay: 480ms;}
.loader_bar .loader_circle:nth-child(4) {animation-delay: 720ms;}
.loader_bar .loader_circle:nth-child(5) {animation-delay: 960ms;}

@keyframes orbit {
	0% {transform: rotate(225deg);opacity: 1;animation-timing-function: ease-out;}
	7% {transform: rotate(345deg);animation-timing-function: linear;}
	30% {transform: rotate(455deg);animation-timing-function: ease-in-out;}
	39% {transform: rotate(690deg);animation-timing-function: linear;}
	70% {transform: rotate(815deg);opacity: 1;animation-timing-function: ease-out;}
	75% {transform: rotate(945deg);animation-timing-function: ease-out;}
	76% {transform: rotate(945deg);opacity: 0;}
	100% {transform: rotate(945deg);opacity: 0;}
}

Add below snippet which will hide loader after page loading is completed. Here i am also used button named hide_loader which is used to hide loader explicitly.

$(window).load(function() {
	$(".loader").fadeOut("slow");
})
$(".hide_loader").click(function() {
	$(".loader").fadeOut("slow");
})

Note that this code using jQuery methods, so you need to use jQuery.min.js file into your page. Click here to download above snippet as HTML file.

Leave a Reply

Your email address will not be published. Required fields are marked *