Introduction:

Hello everyone! Today’s project is a minimal and clean loading animation created using only HTML and CSS. This kind of animation is often used as a pre loader for websites, apps, or sections that take a moment to load.

The best part? No JavaScript needed! It’s fully responsive, lightweight, and works smoothly in all modern browsers. Whether you’re a beginner or just want to make your site look more professional, this is a perfect little project to add to your portfolio.

Website Structure Overview:

This project consists of a simple HTML structure and a CSS file that handles all the animation.

HTML Code:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Loading Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="wrapper">
      <div class="loader">
        <div class="loading one"></div>
        <div class="loading two"></div>
        <div class="loading three"></div>
        <div class="loading four"></div>
      </div>
    </section>
  </body>
</html>

HTML Structure:

We wrap our loader inside a <section> with a class wrapper. Inside this, there's a div with the class loader, which contains four child divs, each representing a loading dot.

Each dot has a class like one, two, etc., which we use to give them staggered animation delays. This creates a flowing animation sequence.

CSS Code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #00008bcb;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.wrapper .loader {
  display: flex;
  justify-content: space-evenly;
  padding: 0 20px;
}

.loader .loading {
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  margin: 0 10px;
  animation: load 0.8s ease infinite;
}

.loader .loading.one {
  animation-delay: 0.3s;
}
.loader .loading.two {
  animation-delay: 0.4s;
}
.loader .loading.three {
  animation-delay: 0.5s;
}

@keyframes load {
  0% {
    width: 30px;
    height: 30px;
  }
  50% {
    width: 20px;
    height: 20px;
  }
}

CSS Styling and Animation Breakdown

The CSS starts by removing all default padding and margin using the universal * selector and applies box-sizing: border-box to make sizing more predictable. The body is given a deep blue background to contrast with the white loading circles.

The main .wrapper uses Flexbox to center the loader vertically and horizontally on the screen. Inside the loader, the small white circles are styled with a fixed width and height, a white background, and full border-radius to make them round.

Now comes the main part — the animation.

Using @keyframes, we define an animation called load where:

  • At 0%, the circle is at full size (30px)

  • At 50%, it shrinks to 20px

  • Then it returns to full size — this repeats infinitely

Each dot is given the same animation but with a slightly different delay (0.3s, 0.4s, 0.5s) so that they don’t all animate at the same time. This creates the "wave" effect.

Why This Project Is Awesome

No JavaScript - Pure HTML and CSS
Lightweight and fast - Great for performance
Easy to customize - You can change colors, speed, size, shape
Perfect for practice - Ideal for beginners learning flexbox and animations
Responsive by default - centered in any screen size

Conclusion

Creating a loading animation with just HTML and CSS is not only fun but also very useful in real-world web development. This type of loader can be used on splash screens, form submissions, or anywhere a small delay occurs. It enhances the user experience and gives your site a polished, professional feel.

This simple design proves that you don’t always need fancy tools — a few lines of clean CSS can create stunning results. Try adding this to your next project or portfolio website and impress your visitors with smooth loading effects!