Jelly Loader

Four bars that squash and stretch in sequence.

SignatureServer-safe

Install

bash

npx @agents-npm-packages/vibeui add jelly-loader --dir ./src/components/ui

Import

tsx

import { JellyLoader } from "@/components/ui/jelly-loader"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<JellyLoader>

Prop	Type	Default	Description
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/jelly-loader.tsx

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

/** Four bars that squash and stretch in sequence. */
export function JellyLoader({ className }: { className?: string }) {
  return (
    <div
      role="status"
      aria-label="Loading"
      className={cn("flex h-6 items-center gap-1.5", className)}
    >
      {[0, 1, 2, 3].map((i) => (
        <span
          key={i}
          className="inline-block h-full w-1.5 animate-jelly rounded-full bg-accent"
          style={{ animationDelay: `${i * 0.12}s` }}
        />
      ))}
    </div>
  );
}

Exports JellyLoader. Peer dependencies: clsx, tailwind-merge.