Preloader HTML
Preloaders are an essential part of any website that wants to provide users with a smooth experience, especially if your site takes time to load. A CSS loader animation is a simple way to engage users while your page content is being prepared. In this tutorial, we’ll show you how to create a preloader using HTML and CSS, allowing you to add a professional touch to your website’s loading experience.
Why Use a Preloader?
A preloader helps manage the user experience by showing a loading animation while the website’s content is being fetched. This reduces bounce rates and keeps users engaged, ensuring they remain on your website longer.
Using CSS animations for your preloader makes it lightweight and easy to implement. With the right keyframe animations, you can create stunning effects without the need for JavaScript.
Step-by-Step Code Breakdown:
We start by creating the HTML structure. Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> Preloader </title>
<style type=”text/css”>
body{
background: #400563;
}
#loader {
width: 100px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin: -20px -50px;
}
#loader div {
width: 20px;
height: 20px;
background: #FFEB3B;
border-radius: 50%;
position: absolute;
}
#d1{
animation: animate 2s linear infinite;
}
#d2{
animation: animate 2s linear infinite -.4s;
}
#d3{
animation: animate 2s linear infinite -.8s;
}
#d4{
animation: animate 2s linear infinite -1.2s;
}
#d5{
animation: animate 2s linear infinite -1.6s;
}
@keyframes animate {
0%{
left:100px;
top:0;
}
80%{
left: 0;
top: 0;
}
85%{
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90%{
width: 40px;
height: 15px;
}
95%{
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100%{
left: 100px;
top: 0;
}
}
</style>
</head>
<body>
<div id=”loader”>
<div id=”d1″></div>
<div id=”d2″></div>
<div id=”d3″></div>
<div id=”d4″></div>
<div id=”d5″></div>
</div>
</body>
</html>
How the CSS Loader Works:
The preloader is centered using CSS positioning. The #loader div contains five smaller div elements that represent the animated dots. Each dot is animated with a delay using CSS keyframes, giving the appearance of a bouncing motion.
The @keyframes rule controls the position and size of each dot as they move across the screen. By adjusting the timing of the animation with the delays, you can create a smooth and seamless loader effect.
Customizing Your Loader:
Feel free to experiment with different colors, sizes, and timing to suit your website’s design. You can also add more dots or adjust the animation duration to fit your needs. Preloaders are a great way to add a unique, professional touch to your site.
