docs / sula / sula-loader
SulaLoader
a loading moment made of liquid glass. each loop stages one physical event: a bead tears free and returns, drops gather and scatter, or two masses trade momentum through a bridge. the loader unmounts the moment the work lands.
intensity · assertsrsc · client
provenance
authored in usvalayer
sulaintensity
asserts · one per region. it is the focal pointcomposition
the big wait: a route change, a splash, an empty panel, a hero settling inone per screen. it is the focal point while nothing else existsnot the spinner for a button, a table row, or a validating field. that is Spinnernever left looping behind a finished pagea11y
role="status" with aria-busy, announces its label · the field is aria-hidden · reduced motion gets the stilljest-axedependencies
motion · ogl · sula-core from the same packagelive demo · try it out
Loading
recoil, release, return
customize
motionwhich looping event it stages
sizesquare side in px
speedloop-rate multiplier
labelthe announced status
fluidoff renders the static still
shine0 matte glass, 1 full neon rim
usage
import { SulaLoader } from "@usva-ui/react/sula/sula-loader";
<SulaLoader />the still · fluid={false}, reduced motion, or no WebGL2
Loading
Loading
Loading
props
| prop | type | default | notes |
|---|---|---|---|
| size | number | 96 | square side in px. the blobs scale off it, so this is the only sizing knob. |
| motion | "orbit" | "cluster" | "twin" | "orbit" | orbit relays a released bead; cluster gathers three unequal drops; twin exchanges momentum between two masses. |
| speed | number | 1 | loop-rate multiplier. higher is faster. |
| label | string | "Loading" | the status text a screen reader announces. |
| fluid | boolean | true | false renders a static still and mounts no canvas. |
| accentColor | string | — | rim light and glow on the droplets. defaults to the accent token. |
| backdrop | string | — | the colour the glass tints against. defaults to the bg token. |
| tint | string | — | the glass itself. defaults to the surface-2 token. |
| shine | number | — | 0 is flat matte glass, 1 is the full neon rim. derived from the backdrop when unset. |
get it
bun add @usva-ui/reactusage
import { SulaLoader } from "@usva-ui/react/sula/sula-loader";
{isPending ? <SulaLoader label="Loading dashboard" /> : <Dashboard />}