Nice and Easy Preloader with CSS3 and jQuery

In this short article we will demonstrate how to create a nice and simple loader for a website with HTML5, CSS3 and jQuery. The idea consists in showing a loader until all elements of the website have been loaded so the visitors wont have to see a blank webpage until all its element loads.

Before reading the article you can check a simple demo in the link below:
Firstly, lets write down the html part of this loader:

<!-- Preloader -->
<section class="loadingWrapper">
<div class="load">
<h2 class="loader">Loading</h2>
<!-- end Preloader -->

The html will contain a div with height and width equal to the screen size to cover all elements of the website and a h2 element styled to look like a circle. The moment that the elements are loaded we hide this div using jQuery.

Now lets give it some pretty styles with CSS3.

@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* ---------------- Preload Styles ---------------- */
.loadingWrapper {background: #FFF;color: #424242;position: fixed;left: 0; top: 0;width: 100%;height: 100%;z-index: 99999999;}
.loader, .loader:after {width: 30px;height: 30px;}
.loader {margin: 20% auto;border-radius: 50%;font-size: 6px;position: relative;text-indent: -9999em;border-top: 1.1em solid #ffd194;border-right: 1.1em solid #ffd194;border-bottom: 1.1em solid #ffd194; border-left: 1em solid #da7c00;-webkit-animation: fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear;}
/* ---------------- End Preload Styles ---------------- */

Finally lets remove the loader when all elements have been loaded. We can do this using jQuery onload function.

$(window).on('load', function() {
$('.loadingWrapper').fadeOut('slow',function () {

Note that in the source file i have commented jQuery onload  function because i want the loader on all the time for demo purpose.

Leave a reply