Interactive Loading Animation with CSS

#codepen #css #frontend #animation

This project demonstrates how to create an engaging loading animation using pure CSS.
The animation features a rotating background color and a loader composed of** 20 spinning dots **that pulsate sequentially. The background hue shifts continuously, creating a dynamic visual effect. Each dot is positioned using CSS variables and animated with keyframes to scale up and down in a rhythmic pattern.

Key Features:

Rotating Background: Smooth color transitions using hue-rotate.
Pulsating Dots: Sequential animation delays for a wave effect.
Pure CSS: No JavaScript required, ensuring lightweight performance.

Usage

Embed the HTML in your webpage.
Add the CSS to your stylesheet.
Adjust the number of spans and their styles as needed for different visual effects. This loader is perfect for adding a modern, visually appealing touch to your web projects.

HTML

<section>
  <div class="loader">
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
    <span style="--i:4;"></span>
    <span style="--i:5;"></span>
    <span style="--i:6;"></span>
    <span style="--i:7;"></span>
    <span style="--i:8;"></span>
    <span style="--i:9;"></span>
    <span style="--i:10;"></span>
    <span style="--i:11;"></span>
    <span style="--i:12;"></span>
    <span style="--i:13;"></span>
    <span style="--i:14;"></span>
    <span style="--i:15;"></span>
    <span style="--i:16;"></span>
    <span style="--i:17;"></span>
    <span style="--i:18;"></span>
    <span style="--i:19;"></span>
    <span style="--i:20;"></span>
  </div>
</section>

CSS

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
width:100%;
  background: #042104;
  animation: animateBg 10s linear infinite;
}

@keyframes animateBg {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

section .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
section .loader:hover {
  position: relative;
  width: 140px;
  height: 140px;
}
section .loader span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(18deg * var(--i)));
}

section .loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #00ff0a;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 
              0 0 100px #00ff0a;
  animation: animate 2s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0% {
    transform: scale(1);
  }
  80%, 100% {
    transform: scale(0);
  }
}

Top comments (7)

Jon Randy 🎖️ • May 28

Pretty, but how is it 'interactive'?

Muhammad Ali • Jun 2

Thank you for your comment! You're right; the current implementation isn't interactive. The animation is purely visual at the moment. However, I appreciate your feedback and will be adding interactive features, like a bounce effect on touch, in the coming days.

Muhammad Ali • Jun 2

@jonrandy Check this out Now!! Now its interactive

Moses B • May 28

Interactive means it does something when the user touches or swipes it. It's currently not interactive but I would like if it does a little bounce when a user touches it