Pepulux Playbook

Loading

Inline spinners, dot circles, and full-page loading states. Four sizes.

import{ LoadingIndicator, LoadingPage, LoadingOverlay } from "@pepulux/ui"

Styles

Loading...

Loading...

Loading...

Sizes

Loading...

Loading...

Loading...

Loading...

With label

Loading data…

Props

Prop	Type	Default	Description
style	"line-simple" \| "line-spinner" \| "dot-circle"	"line-spinner"	Animation style
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Indicator size
label	string	—	Text displayed below the indicator
className	string	—	Additional CSS classes

Application component → Loading indicatorswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Show that work is happening

Use a skeleton for page structure, a spinner for short waits on a single control and a progress bar when you can measure progress. Avoid indicators for waits under a second.

PreviousEmpty State