Back

Creating a Fluid Wave Pulse Animation

Learn how to build an elegant, liquid-inspired loader with smoothly animated wave forms using pure CSS.

HTML

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


        <div class="wave-loader">
          <div class="wave wave-1"></div>
          <div class="wave wave-2"></div>
          <div class="wave wave-3"></div>
          <div class="wave wave-4"></div>
        </div>

CSS

Let's start by setting up our loader container. We create a boundary box with specific dimensions and use flexbox to center its contents along the horizontal axis and align them to the bottom. The relative positioning creates a positioning context for the absolutely positioned wave elements inside.


        .wave-loader {
            position: relative;
            width: 120px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

Next, we style each wave element. These are thin rectangles with rounded tops (border-radius) that will animate up and down to create our wave effect. We use a rich purple color (#7E22CE) that provides good contrast and visual appeal, and absolutely position them at the bottom of the container.


        .wave {
            position: absolute;
            bottom: 0;
            width: 12px;
            height: 20px;
            background-color: #7E22CE;
            border-radius: 6px;
            animation: wave 1.5s ease-in-out infinite;
        }

Each wave is positioned at a specific horizontal location and given a slightly delayed animation start time. This creates the flowing, wave-like motion as each bar rises and falls in sequence. The 36px spacing between elements creates an aesthetically pleasing rhythm while ensuring the waves are distinct yet clearly part of the same system.


        .wave-1 {
            left: 0;
            animation-delay: 0s;
        }

        .wave-2 {
            left: 36px;
            animation-delay: 0.2s;
        }

        .wave-3 {
            left: 72px;
            animation-delay: 0.4s;
        }

        .wave-4 {
            left: 108px;
            animation-delay: 0.6s;
        }

The animation is defined using the @keyframes rule. We animate the height property, starting at 20px, expanding to 55px at the midpoint, and then returning to 20px to complete the cycle. The ease-in-out timing function creates a natural, organic movement that slows at the peak and trough of each wave, mimicking the physics of water or sound waves.


        @keyframes wave {
            0% {
                height: 20px;
            }
            50% {
                height: 55px;
            }
            100% {
                height: 20px;
            }
        }

The combined animations create a perpetual wave-like motion that flows from left to right and then cycles back, creating a hypnotic, calming effect that's perfect for indicating an ongoing process. The full animation cycle takes 1.5 seconds, but with the staggered delays, there's always at least one element in motion, creating a continuous sense of activity. This wave pulse loader offers several advantages as a loading indicator: - Fluid, natural motion: The wave-like animation creates an organic feel that's less mechanical than many traditional loaders. - Visually calming: Unlike rapid spinners or flashing elements, the smooth up-and-down motion creates a soothing visual rhythm that's easy on the eyes during longer waits. - Audio-visual metaphor: The wave pattern resembles sound or audio wavelengths, making it particularly appropriate for media applications, sound processing, or voice interactions. - Scalable design: The loader maintains its character when scaled and can be expanded with additional wave elements for wider layouts. - Design versatility: By adjusting the colors, timing, and dimensions, this loader can fit seamlessly into a wide range of interfaces from professional to playful. This elegant, liquid-inspired animation transforms waiting time into a more pleasant visual experience while clearly communicating that processing is underway.

Whole code

<div class="wave-loader">
  <div class="wave wave-1"></div>
  <div class="wave wave-2"></div>
  <div class="wave wave-3"></div>
  <div class="wave wave-4"></div>
</div>

<style>
.wave-loader {
  position: relative;
  width: 120px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.wave {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 20px;
  background-color: #7E22CE;
  border-radius: 6px;
  animation: wave 1.5s ease-in-out infinite;
}

.wave-1 {
  left: 0;
  animation-delay: 0s;
}

.wave-2 {
  left: 36px;
  animation-delay: 0.2s;
}

.wave-3 {
  left: 72px;
  animation-delay: 0.4s;
}

.wave-4 {
  left: 108px;
  animation-delay: 0.6s;
}

@keyframes wave {
  0% {
    height: 20px;
  }
  50% {
    height: 55px;
  }
  100% {
    height: 20px;
  }
}
</style>

Thank you for reading this article.

Creating a Fluid Wave Pulse Animation

HTML

CSS

Whole code

Comments

More loaders

Similar

See also