Back

Creating a Rhythmic Staggered Bar Animation

Learn how to build a modern equalizer-style loader with bars that animate in a sequential pattern using CSS animations.

HTML

The HTML structure for our staggered bar loader is elegantly simple. We have a main container with the class "staggered-loader" that houses five div elements with the class "bar", each with an additional class to identify its position in the sequence ("bar-1" through "bar-5").


        <div class="staggered-loader">
          <div class="bar bar-1"></div>
          <div class="bar bar-2"></div>
          <div class="bar bar-3"></div>
          <div class="bar bar-4"></div>
          <div class="bar bar-5"></div>
        </div>

CSS

Let's start by setting up our loader container. We use flexbox to create a horizontal row of bars, aligned at the bottom (align-items: flex-end) with a small gap between each bar. The container height establishes the maximum vertical space for the animation.


        .staggered-loader {
            display: flex;
            align-items: flex-end;
            gap: 5px;
            height: 60px;
        }

Next, we define the style for each bar. They are narrow rectangles with a vertical gradient from dark purple at the bottom to lighter purple at the top. We round just the top corners using border-radius to create a sleek, modern look. Each bar will share the same "grow" animation but with different delay values.


        .bar {
            width: 8px;
            height: 10px;
            background: linear-gradient(to top, #6D28D9, #A78BFA);
            border-radius: 4px 4px 0 0;
            animation: grow 1.4s ease-in-out infinite;
        }

The key to creating the staggered, wave-like effect is applying incremental animation delays to each bar. The first bar starts immediately, with each subsequent bar delayed by 0.2 seconds more than the previous one. This careful timing creates a smooth, sequential pattern that cycles continuously through the bars.


        .bar-1 {
            animation-delay: 0s;
        }

        .bar-2 {
            animation-delay: 0.2s;
        }

        .bar-3 {
            animation-delay: 0.4s;
        }

        .bar-4 {
            animation-delay: 0.6s;
        }

        .bar-5 {
            animation-delay: 0.8s;
        }

The animation is defined using the @keyframes rule. We create a simple height variation where each bar starts and ends at 10px height, but expands to 50px at the midpoint of the animation. The ease-in-out timing function creates a smooth, naturalistic motion that slows at the peak and trough of each cycle.


        @keyframes grow {
            0%, 100% {
                height: 10px;
            }
            50% {
                height: 50px;
            }
        }

The combined effect of the staggered delays creates a wave-like motion that sweeps from left to right and then appears to reverse as the cycle continues. With the full animation taking 1.4 seconds per bar but staggered at 0.2-second intervals, there's always movement happening somewhere in the loader. The gradient coloring adds depth to the bars, making them appear more three-dimensional as they extend upward. This staggered bar loader offers several unique advantages: - Music/audio metaphor: The animation resembles an audio equalizer or sound wave visualization, making it particularly appropriate for audio applications, voice recognition, or any sound-processing context. - Rhythmic movement: The predictable yet dynamic pattern creates a satisfying visual rhythm that holds attention without being distracting. - Space efficiency: The vertical expansion pattern makes efficient use of space while still providing clear visual feedback. - Modern aesthetic: The gradient colors and rounded corners give the loader a contemporary look that fits well in sleek, modern interfaces. - Scalability: The loader can be easily extended with additional bars or customized with different heights and timings to match specific design requirements. This dynamic, music-inspired animation transforms waiting time into a more engaging experience while clearly communicating that a process is active.

Whole code

<div class="staggered-loader">
  <div class="bar bar-1"></div>
  <div class="bar bar-2"></div>
  <div class="bar bar-3"></div>
  <div class="bar bar-4"></div>
  <div class="bar bar-5"></div>
</div>

<style>
.staggered-loader {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
}

.bar {
  width: 8px;
  height: 10px;
  background: linear-gradient(to top, #6D28D9, #A78BFA);
  border-radius: 4px 4px 0 0;
  animation: grow 1.4s ease-in-out infinite;
}

.bar-1 {
  animation-delay: 0s;
}

.bar-2 {
  animation-delay: 0.2s;
}

.bar-3 {
  animation-delay: 0.4s;
}

.bar-4 {
  animation-delay: 0.6s;
}

.bar-5 {
  animation-delay: 0.8s;
}

@keyframes grow {
  0%, 100% {
    height: 10px;
  }
  50% {
    height: 50px;
  }
}
</style>

Thank you for reading this article.

Creating a Rhythmic Staggered Bar Animation

HTML

CSS

Whole code

Comments

More loaders

Similar

See also