Beacon.LiveAdmin.StationUI.HTML.Spinner (Beacon LiveAdmin v0.4.0)
View SourceThe spinner component offers two options (spinner and spinner_double) to render an animated looping SVG to represent a loading state. Spinners are used to notify users when something is in progress or fetching data. When a page or element is updating, the loading animation appears and then resolves once that action is complete. Each spinner option has a default size but this can be overridden.
Spinner:
The Spinner is used primarily within UI elements - such as file unloaders / drag and drops
- to indicate progress when updating content.
This <span> element is not visible on screen but will still be announced by screen readers to notify Assistive Technology users of the loading status.
Spinner options:
-- class: Add classes to spinner component in addition to the base defined classes.
default/medium size: "h-6 w-6" (overridden when specifying a class)
Spinner Example
<.spinner class="h-11 w-11" />
Suggested size classes:
xl: "h-11 w-11" lg: "h-8 w-8" sm: "h-5 w-5" xs: "h-4 w-4"
Double Spinner:
The Double Spinner is used primarily when a page needs to load before displaying new content. It is by default larger than the Spinner and has two rings instead of one.
This <span> element is not visible on screen but will still be announced by screen readers to notify Assistive Technology users of the loading status.
Double spinner options:
-- class: Add classes to double spinner component in addition to the base defined classes.
default/medium size: h-[114px] w-[114px] (overridden when specifying a class)
Double Spinner Example
<.spinner_double class="h-16 w-16" />
Suggested size classes:
xl: "h-[244px] w-[244px]" lg: "h-[184px] w-[184px]" sm: "h-[84px] w-[84px]" xs: "h-16 w-16"
Summary
Functions
Attributes
class
(:any
) - Defaults to"h-6 w-6"
.
Attributes
class
(:any
) - Defaults to"h-[114px] w-[114px]"
.