Loader with HTML and CSS

Published by StudyMuch on

Loader with HTML and CSS

Creating a Loader with HTML and CSS

Loading animations are a great way to keep users engaged while they wait for content to load on a website. In this tutorial, we will show you how to create a simple yet attractive loader using HTML and CSS. We will provide you with the complete source code and explain step by step how it works.

HTML Structure

Let’s start by setting up the HTML structure for our loader. We will create one section element with class loader and five child div elements with class slider. Each div will represent a part of our loader animation.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Loader StudyMuch</title>
        /* Your CSS code goes here */
  <section class="loader">
     <div class="slider" style="--i:0"></div>
     <div class="slider" style="--i:1"></div>
     <div class="slider" style="--i:2"></div>
     <div class="slider" style="--i:3"></div>
     <div class="slider" style="--i:4"></div>

Styling with CSS

Now, let’s add the CSS code to style our loader. We’ll explain the key parts of the CSS code step by step.

<style type="text/css">
  body {
     display: flex;
     justify-content: center;
     align-items: center;
     background: black;
     height: 50vh;
  .loader {
     display: flex;
     align-items: center;        
     justify-content: center;
     flex-direction: row;
  .slider {
     overflow: hidden;
     background-color: white;
     margin: 0 15px;
     height: 80px;
     width: 20px;
     border-radius: 30px;
     box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.1),
                 -15px -15px 30px #b8b8b8,
                 inset 5px 5px 10px rgba(0, 0, 255, 0.1),
                 inset 35px 5px 10px rgba(0, 0, 0, 0.1);
     position: relative;
  .slider::before {
     content: "";
     position: absolute;
     height: 20px;
     width: 20px;
     box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3),
                 0px 420px 0 400px #2697f3,
                 inset 0px 0px 0px rgba(0, 0, 0, 0.1);
     animation: animate_2 1.5s ease-in-out infinite;
     animation-delay: calc(-0.2s * var(--i));
  @keyframes animate_2 {
     0% {
         transform: translateY(250px);
         filter: hue-rotate(0deg);
     50% {
         transform: translateY(0);
     100% {
         transform: translateY(250px);
         filter: hue-rotate(180deg);

CSS Explanation

  • We start by styling the body element to center
    our loader on a black background and set the height to 50vh (50% of the viewport height) to make it visually appealing.
  • The .loader class
    styles the container of our loader, centering it both horizontally and vertically.
  • Each .slider
    represents a part of our loader. We’ve added rounded corners, shadows, and other styles to make it look visually appealing.
  • The .slider::before
    pseudo-element is used to create the animated element within each slider.
  • We define a keyframe animation called animate_2
    that moves the element vertically and changes its hue to create the loading effect.
  • The animation-delay
    property is set to stagger the animations of each slider.


With this HTML and CSS code, you’ve created a visually appealing loader animation that you can use in your web projects. Feel free to customize the colors, sizes, and animation timings to match your website’s design. Loaders like this add a touch of professionalism and engagement to your site, enhancing the user experience during content loading. And last if you have any doubt regarding this post you can ask with any hesitation in the comment section.

Learn More;

1 Comment

canada pharmacies · October 29, 2023 at 5:42 am

Awesome! Its in fact amazing post, I have got much clear idea concerning from this post.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *