Loading
Indeterminate progress indicators for async work. Use ProgressBar when you know the percentage.
Variants
Spinner
Dots
Bar
Sizes
xs
sm
md
lg
xl
Colors
brand
neutral
success
warning
error
white
With label
Loading
Syncing data
Preparing your dashboard
Inline (inside buttons & fields)
Checking availability…
Block placeholder
Overlay on a card
The overlay absolutely fills its nearest positioned ancestor. Give the parent
position: relative
and drop a <Loading Overlay="true" /> inside.
Patient vitals
Heart rate, BP, SpO2 refreshed every 30 seconds.
HR
72
BP
118/76
SpO2
98%
Usage
Loading.razorrazor
<!-- Inline inside text -->
<Loading Size="xs" Label="Checking…" />
<!-- Centered block placeholder -->
<Loading Variant="dots" Size="lg" Label="Loading patients" Stacked="true" Block="true" />
<!-- Full-width indeterminate bar -->
<Loading Variant="bar" Size="md" Label="Uploading…" />
<!-- Overlay on a positioned parent -->
<div style="position: relative;">
…card contents…
<Loading Overlay="true" Variant="spinner" Size="xl" Label="Refreshing" />
</div>
<!-- Full-screen overlay -->
<Loading Overlay="true" Fullscreen="true" Size="xl" Label="Signing you in" />