Loading Screen

Fullscreen or contained loading shell with progress, cross field, and optional branding slots.

Components / Loading Screen

Feedbackloadingshellprogress

Fullscreen or contained loading shell with progress, cross field, and neutral branding hooks.

Preview

Loading preview…

Usage

Fullscreen or contained loading shell with progress, cross field, and optional branding slots.

<LoadingScreen
  progress={68}
  message="Syncing runtime"
  title="LOADING"
  logo={<img src="/logo.svg" alt="" />}
  footerBrand={<img src="/brand.svg" alt="" />}
  fullscreen={false}
/>

Files

components/steez/LoadingScreen.tsxcomponent

components/steez/LoadingScreen.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { LoadingScreen, useLoadingProgress } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/loading-screen.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { LoadingScreen, useLoadingProgress } from "<project-root>/components/steez/LoadingScreen";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/loading-screen.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Loading Progress Bar

Segmented loading bar for build, deploy, and initialization progress.

Loading Overlay Crystalline

Compact centered loading card for viewers, canvases, and media shells.