Wave Bars

A rhythmic wave loader with cascading vertical bar motion.

1. Copy the component file

Create a new file called wave-bars-loader.jsx in your reusable components folder (for example /src/components/) and paste the following code into it.

import { useMemo } from "react";
import styles from "./wave-bars-loader.module.css";

const WaveBarsLoader = (props) => {
  const {
    count = 6,
    colors = [
      "#eade3d",
      "#2eeca8",
      "#ec902e",
      "#09b7bf",
      "#55acee",
      "#ea3d8c",
    ],
  } = props;

  const MIN_WAVES = 5;

  const wavesMap = useMemo(() => {
    const wavesCount = Math.max(MIN_WAVES, count);
    const wavesMap = [];
    for(let i=0; i < wavesCount; i++) {
      wavesMap.push({
        id: `wave-${Math.random()}`,
        color: colors[i] ?? "currentColor",
        delay: `${-100 * (wavesCount - i)}ms`,
      });
    }
    return wavesMap;
  }, [count]);

  return (
    <span className={styles["wave-bars-loader"]}>
      {wavesMap.map(wave => (
        <span
          className={styles["wave"]}
          style={{
            "--wave-color": wave.color,
            "--wave-animation-delay": wave.delay,
          }}
        >
        </span>
      ))}
    </span>
  );
};

export default WaveBarsLoader;

2. Copy the CSS module file

In the same folder, create a file called wave-bars-loader.module.css and paste the following CSS.

.wave-bars-loader {
  --wave-width: 16px;
  --wave-height: 64px;
  --wave-animation-duration: 800ms;

  display: flex;
  gap: 1px;

  .wave {
    --wave-color: currentColor;
    --wave-animation-delay: 0ms;

    width: var(--wave-width);
    height: var(--wave-height);
    background: var(--wave-color);
    animation: wave-bar-keyframes var(--wave-animation-duration) ease-in-out infinite;
    animation-delay: var(--wave-animation-delay);
  }
}

@keyframes wave-bar-keyframes {
  0%,
  60%,
  100% {
    transform: scaleY(0.05);
  }

  35% {
    transform: scale(1);
  }
}

3. Use the component

Now you can import and use the component anywhere in your project.

import WaveBarsLoader from "@/components/loaders/wave-bars-loader/wave-bars-loader";

const WaveBarsLoaderPreview = () => {
  return (
    <WaveBarsLoader />
  )
};

export default WaveBarsLoaderPreview;

Props

Configure the component with the following props:

Prop	Type	Required	Default	Description
count	`number`	No	`6`	Number of bars in the wave animation (minimum 5). If greater than 6, custom colors must be provided.
colors	`string[]`	No	`[ "#eade3d", "#2eeca8", "#ec902e", "#09b7bf", "#55acee", "#ea3d8c" ]`	Array of colors applied to bars. If `count` is more than 6 and colors are not provided, the loader falls back to the current text color.