Wave Bars

A rhythmic wave loader with cascading vertical bar motion.

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

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

export default WaveBarsLoaderPreview;

Installation

Run the command from your project root directory (the folder that contains package.json).

npx mosaicui-cli@latest loaders/wave-bars-loader

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 { memo, 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 waves = useMemo(() => {
    const wavesCount = Math.max(MIN_WAVES, count);
    return Array.from({ 
      length: wavesCount 
    }, (_, i) => ({
      id: `wave-${i}`,
      color: colors[i] ?? "currentColor",
      delay: `${-100 * (wavesCount - i)}ms`,
    }));
  }, [count]);

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

export default memo(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: scaleY(1);
  }
}

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.