Loading text
A line that says what's happening while you wait, with a brighter band passing through it. Pair it with the spinner.
Thinking…
Markup
<span class="ob-loading-text" role="status">
<span class="ob-loading-text-sizer" aria-hidden="true"></span>
<span class="ob-loading-text-phrase">Thinking…</span>
</span>Behaviour
import { cycleLoadingText, shuffle } from "obvious/behaviours";
const stop = cycleLoadingText(el, shuffle(phrases), { pool: phrases });Notes
The sizer holds the width of the longest phrase, so nothing beside it moves when the phrase changes.
CSS
@import "obvious/css/components/loading-text.css";Knobs
Set any of these on the component, or an ancestor, to change it.
| Property | Default |
|---|---|
--ob-loading-text-sweep | 1800ms |
--ob-loading-text-swap | 180ms |
--ob-loading-text-hold | 1400ms |