Wave

A wave animation with bars that scale vertically to show loading. It uses keyframe animation to create a flowing effect. Use it to visually indicate loading or processing states.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/wave

npx layro-cli add @turbostarter/wave

npx layro-cli add @turbostarter/wave

bunx layro-cli add @turbostarter/wave

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { cn } from "@/lib/utils";

const WAVE_BAR_HEIGHTS = ["50%", "75%", "100%", "75%", "50%"] as const;

function Wave({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <>
      <style>{`
        @keyframes loading-ui-wave {
          0%,
          100% {
            transform: scaleY(1);
          }