Loading State
For work that takes a while: pixels driving along, foil passing over the label, and the time counting up.
Usage
import { LoadingState } from '@wdzyi/ui';
<LoadingState label='Generating the report' pattern='orbit' />Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- labelstring = 'Loading'
- What it’s doing. Screen readers hear this, and not the timer.
- pattern'drive' | 'dots' | 'orbit' = 'drive'
- Drive is a chevron heading right, Dots the same with round cells, and Orbit a comet lapping the edge.
Notes
- The time counts from when it appears, to a tenth of a second, in figures that all take the same width, so nothing beside it moves.
- Work rarely starts all at once, so in the demo the jobs start 1.5 and 1.8 seconds apart, and each clock keeps its own time.
- PixelLoader and ShineText are exported too, for anywhere else that needs to show work.
- With reduced motion, the pixels and the shine hold still. The time still counts.