Loading...

King Subash | Live Life King Size

Simple Page Preloader with CSS and JavaScript

Tech Blog
css preloader
preloader js
preloader for website
page preloader
js preloader
Prelaoder Code
Prelaoder
CSS
Javascript
Sample Code
: King Subash : 06th June 2020

Preloader is a small code which can be added to your website to produce and visual effect. Most importantnly it allow time for assets (Images, CSS, etc.) to load in website. I have created a light weight preloader without using any library. This Simple Page Preloader is designed with CSS and JavaScript. It's very Simple page loader which can be save your time and effort.

I have used HTML, CSS, CSS3 (Optional), Javascript to build this preloader.

Step 1:

HTML - Add the following code after <body> tag

<div class="preloader"> <img class="preloader-icon" src="/PATH-TO-IMAGE" alt="My Site Preloader"> </div>
Step 2:

CSS - Code to design and animate preloader (CSS3 Animation code is optional)

PreloaderPreloader ContentPreloader Animation (Optional)
.preloader
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #fff;
z-index: 9999;
text-align: center;
}		.preloader-icon
{
position: relative;
top: 45%;
width: 100px;
border-radius: 50%;
animation: shake 1.5s infinite;
}		@keyframes shake
{
0% { transform: translate(1px, -1px) rotate(0deg);}
10% { transform: translate(1px, -3px) rotate(-1deg);}
20% { transform: translate(1px, -5px) rotate(-3deg);}
30% { transform: translate(1px, -7px) rotate(0deg);}
40% { transform: translate(1px, -9px) rotate(1deg);}
50% { transform: translate(1px, -11px) rotate(3deg);}
60% { transform: translate(1px, -9px) rotate(0deg);}
70% { transform: translate(1px, -7px) rotate(-1deg);}
80% { transform: translate(1px, -5px) rotate(-3deg);}
90% { transform: translate(1px, -3px) rotate(0deg);}
100% { transform: translate(1px, -1px) rotate(-1deg);}
}
Step 3:

Javascript - Simple line of Javascript can be used to hide the preloader once complete document is ready.

window.onload = function(){ document.querySelector(".preloader").style.display = "none"; }
Conclusion

What do you think about this simple preloader transition? Let me know

About Author
King Subash | Live Life King Size
King Subash

I am a Full Stack Web Developer. 10 Years 0 Months of work experience in web development with a Master's Degree in Computer Application (MCA). Hands-on experience on HTML, CSS, PHP, MySQL, Codeigniter, javascript, React JS, jquery, ajax, JSON, LAMP administration, twitter Boostrap, Material CSS, Materializecss. Strong knowledge of Web application and Web servers.