How To Create A Preloader?

Preloader is pretty common to see on any website. Essentially, it is displayed on the website until the website content is fully loaded. An interesting animated preloader entertains the visitors while keeps them waiting for the page to load. After loading the site it will disappear automatically. Preloader makes a website more attractive and user-engaging.

In this post, I’ve shown how to create a preloader. Here, I’ve created the preloader by HTML, CSS and JS. Using this code you can demonstrate the preloader on your website. You can customize it as you want. Besides, it will work responsively on any website and device without any extra coding.

So, Let’s get started!

Step 1: HTML Code

<div class="loader">
	<div class="d-table">
		<div class="d-table-cell">
			<div class="spinner">
				<div class="bounce1"></div>
				<div class="bounce2"></div>
				<div class="bounce3"></div>
			</div>
		</div>
	</div>
</div>

Step 2: CSS Code

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: $white-color;
}
.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}
.spinner > div {
    width: 18px;
    height: 18px;
    background-color: $orange-color;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        transform: scale(0);
    } 
    40% { 
        transform: scale(1.0);
    }
}

Step 3: JS Code

jQuery(window).on('load',function(){
     jQuery('.loader').fadeOut(500);
});

That’s it. Happy Coding.