Loading State - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/loading-state

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { LoadingState } from "@/components/ui/loading-state"
import { useLoading } from "@/hooks/use-loading"

const { progress, finishLoading } = useLoading()

<LoadingState progress={progress} message="Welcome to Saturation" />

Examples

Liquid Metal

WebGL liquid metal shader fill variant.

Loading Mark

Standalone animated S-mark with no text or container.

API Reference

Prop	Type	Default	Description
`progress`	`number`	`0`	Progress percentage (0–100). Drives the wave fill level of the S-logo animation.
`message`	`string`	`"Welcome to Saturation"`	Text displayed below the S-logo, rendered via TextShimmer.
`fadeOut`	`boolean`	`false`	Triggers a 700ms fade-out and scale-down transition.
`fullScreen`	`boolean`	`true`	When true uses min-h-screen; when false fills the parent container.
`className`	`string`	—	Additional CSS classes on the root element.

Welcome to Saturation