Introduction

A loader (or loading spinner) enhances user experience by providing visual feedback during loading times. In this tutorial, we will create a sleek and modern loader using HTML and CSS. Let’s dive in!

What is a Loader?

A loader is an animated element that indicates content is being processed. It assures users that the application is functioning, reducing the chance of frustration during loading times.

Why Use a Loader?

• Improves User Experience: It keeps users informed while waiting.
• Enhances Aesthetics: A well-designed loader can make your website look more professional.
• Prevents User Abandonment: By providing visual feedback, users are less likely to leave while waiting.

Step 1: Setting Up the HTML Structure
We will begin with the basic HTML structure for our loader. The following code creates a container for the loader with twelve bars.

<div class="loader">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>

Step 2: Styling with CSS
Next, we’ll add CSS to style the loader. Here’s the code to create a circular loader with animated bars.

`.loader {
position: relative;
width: 54px;
height: 54px;
border-radius: 10px;
}

.loader div {
width: 8%;
height: 24%;
background: rgb(128, 128, 128);
position: absolute;
left: 50%;
top: 30%;
opacity: 0;
border-radius: 50px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
animation: fade458 1s linear infinite;
}

@keyframes fade458 {
from {
opacity: 1;
}

to {
opacity: 0.25;
}
}`

Step 3: Adding Animation
We will apply rotation and animation delays to each bar to create a dynamic loading effect.

`.loader .bar1 {
transform: rotate(0deg) translate(0, -130%);
animation-delay: 0s;
}

.loader .bar2 {
transform: rotate(30deg) translate(0, -130%);
animation-delay: -1.1s;
}

.loader .bar3 {
transform: rotate(60deg) translate(0, -130%);
animation-delay: -1s;
}

.loader .bar4 {
transform: rotate(90deg) translate(0, -130%);
animation-delay: -0.9s;
}

.loader .bar5 {
transform: rotate(120deg) translate(0, -130%);
animation-delay: -0.8s;
}

.loader .bar6 {
transform: rotate(150deg) translate(0, -130%);
animation-delay: -0.7s;
}

.loader .bar7 {
transform: rotate(180deg) translate(0, -130%);
animation-delay: -0.6s;
}

.loader .bar8 {
transform: rotate(210deg) translate(0, -130%);
animation-delay: -0.5s;
}

.loader .bar9 {
transform: rotate(240deg) translate(0, -130%);
animation-delay: -0.4s;
}

.loader .bar10 {
transform: rotate(270deg) translate(0, -130%);
animation-delay: -0.3s;
}

.loader .bar11 {
transform: rotate(300deg) translate(0, -130%);
animation-delay: -0.2s;
}

.loader .bar12 {
transform: rotate(330deg) translate(0, -130%);
animation-delay: -0.1s;
}`

Step 4: Integrating the Loader into Your Website
To use the loader in your web project, ensure you include the HTML and CSS in your files. Place the loader's HTML markup in your desired location, and the loader will appear during loading processes.

Conclusion

Creating a loader can significantly enhance your website's user experience. With simple HTML and CSS, you can build a visually appealing and functional loader. Experiment with colors and sizes to fit your website's design!