Preloaders

Words Preloader

Multilingual greeting preloader with a curved lip that flattens as the panel slides up.

Import

tsx

import { WordsPreloader } from "@cronus-ui/ui";

bash

npx cronus-ui add words-preloader

Examples

Word greetings

The page sits underneath. After the greetings, the curved lip flattens and the panel slides up to reveal it — same as a real load. Replay from the nav.

Cronus

Product UI system

Ship the interface, not another kit.

Compose of apps, a live theme, and an authorship contract. The catalog is the means.

Get startedBrowse components

Components

182

Blocks

Templates

tsx

const [show, setShow] = useState(true);

useEffect(() => {
  const timer = setTimeout(() => setShow(false), 2500);
  return () => clearTimeout(timer);
}, []);

return (
  <main className="relative">
    <AnimatePresence>
      {show ? <WordsPreloader /> : null}
    </AnimatePresence>
    <Page />
  </main>
);

API Reference

Generated from the component's exported types.

WordsPreloaderProps

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	—
`words`	`readonly string[]`	`DEFAULT_PRELOADER_WORDS`	Greetings cycled before the curve exits. Defaults to the Skiper 8 set.
`firstDelayMs`	`number`	`FIRST_DELAY_MS`	Hold on the first word, in ms. Original is 1000.
`stepDelayMs`	`number`	`STEP_DELAY_MS`	Hold on each following word, in ms. Original is 150.
`labels`	`Partial<WordsPreloaderLabels>`	—	—
`layout`	`"page" \| "contained"`	`"page"`	—