Creative Loading Animation Using HTML & CSS

5 min read
Creative Loading Animation Demo

Project Overview

This project demonstrates a simple yet captivating creative loading animation built purely with HTML and CSS. It features four circular elements that animate in a synchronized, wave-like motion, providing visual feedback to the user that content is being loaded. The animation is designed to be smooth and non-distracting, making it suitable for various web applications where a loading indicator is needed.

The design uses a dark background with bright white circles, creating a clean and modern aesthetic. The animation involves changes in both width and height of the circles, creating a subtle "breathing" or "pulsing" effect, with a staggered delay for each circle to produce the wave. This project is an excellent example of using CSS `@keyframes` and `animation-delay` to create engaging and performant loading indicators without the need for JavaScript.

HTML Structure

The HTML structure for the creative loading animation is minimal and semantic, focusing on containing the animated elements. It consists of a `section` with the class `wrapper`, which serves as a flex container to center the loading animation on the page. Inside this `wrapper`, a `div` with the class `loader` acts as the main container for the individual animating elements. Within the `loader`, there are four `div` elements, each with the class `loading` and an additional class (`one`, `two`, `three`, `four`) to apply staggered animation delays. This simple and clean structure allows for easy styling and animation control through CSS.


<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>
                        

CSS Styling

The CSS for the creative loading animation is responsible for the visual appearance and the smooth, synchronized movement of the loading circles. It starts by resetting default margins and paddings and sets a dark background color for the `body`. The `.wrapper` class uses flexbox to center its content both horizontally and vertically, ensuring the loader is always in the middle of the screen. The `.loader` class also uses flexbox to arrange the individual `loading` circles with even spacing. Each `.loading` circle is styled with a white background, a fixed width and height, and a `border-radius: 50%` to make it perfectly round. The core of the animation is defined by the `@keyframes load` rule, which animates the `width` and `height` of the circles from 30px to 20px and back, creating a pulsing effect. Finally, `animation-delay` properties are applied to `.loading.one`, `.two`, and `.three` to create a staggered, wave-like animation across the circles. This CSS ensures a visually appealing and performant loading indicator.


* {
  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;
  }
}

                        

Live Demo: Creative Loading Animation

Watch a live demonstration of the Creative Loading Animation below.

Final Thoughts

This Creative Loading Animation project provides a simple, elegant, and effective way to indicate loading states in web applications. By utilizing pure HTML and CSS, it delivers a smooth and visually appealing animation without adding JavaScript overhead. The staggered pulsing effect creates a dynamic and engaging user experience, making waiting times feel less tedious.

You can easily customize this component by:

  • Changing the background color and the color of the loading circles to match your website's theme.
  • Adjusting the `width` and `height` values in the `@keyframes load` rule to alter the intensity of the pulsing effect.
  • Modifying the `animation-delay` values to change the speed and synchronization of the wave effect.
  • Adding more `.loading` divs to create a longer sequence of animated circles.
  • Integrating this loader with JavaScript to show/hide it based on actual data loading states.

Pro Tip

For optimal performance, especially on mobile devices, prefer CSS animations over JavaScript-driven animations for simple loading indicators. CSS animations are often hardware-accelerated, leading to smoother results.

Ready to Use This Project?

Click the button below to download the full source code. Download will be ready in 10 seconds.

Stay Updated

Receive coding tips and resources updates. No spam.

We respect your privacy. Unsubscribe at any time.