Examples
Basic
A default spinner with no size override. PF v6's base styles render it at medium diameter with an accessible label of "Loading".
Size variations
PF v6 ships five size modifiers — xs, sm,
md, lg, xl — that resolve to
global spinner-diameter tokens.
xs
sm
md
lg
xl
Custom size
Pass diameter with any CSS length to set
--pf-v6-c-spinner--diameter inline. Useful when the preset size modifiers don't match a
layout exactly.
diameter("2rem")
diameter("80px")
diameter("6rem")
Inline
Set inline=true so the spinner inherits the surrounding font size and color via
pf-m-inline. Useful inside running prose, headings, or buttons.
Small body — fetching results please wait…
Default body — fetching results please wait…
Heading — fetching results please wait…
Documentation
Spinner props
Parameters accepted by
{#include components/feedback/spinner ... /}. Model mode: pass
spinner=<Spinner> built in Java instead — the Java tab on each example shows the
builder. All are passed as Qute named parameters.
| Name | Type | Default | Description |
|---|---|---|---|
size
|
"xs" | "sm" | "md" | "lg" | "xl"
|
PF v6 base diameter |
Renders pf-m-{size} on the SVG. Each value resolves to a token via
--pf-v6-c-spinner--diameter.
|
diameter
|
CSS length (e.g. "2rem", "80px")
|
— |
Sets --pf-v6-c-spinner--diameter inline. Overrides
size when both are present.
|
inline
|
boolean |
false
|
Applies pf-m-inline; the spinner inherits the parent's font size and
color.
|
label
|
String |
"Loading"
|
Accessible label rendered as aria-label. Ignored when
ariaLabelledBy is set.
|
ariaLabelledBy
|
String (element id) | — |
Renders aria-labelledby pointing at an existing element. Use this when the
spinner's name lives in adjacent text. Overrides label.
|
ariaValuetext
|
String |
"Loading..."
|
Sets aria-valuetext. Useful when the spinner's progress can be narrated more
precisely (e.g. "45% complete").
|
Usage
Standalone vs. inside an icon overlay. The spinner is its own component (components/feedback/spinner) and uses PF v6's .pf-v6-c-spinner CSS — not the icon's
.pf-v6-c-icon chrome. The icon component renders the spinner internally as its default
progressIcon when inProgress=true. For standalone loading
indicators (no resting icon to swap with), include this component directly.
Sizing precedence. Both size and
diameter drive --pf-v6-c-spinner--diameter.
diameter wins because it's an inline style — use the preset
size tokens when possible and reach for diameter only when
a layout requires an exact pixel/rem value.
Accessibility. The SVG always has role="progressbar". Provide an
accessible name in one of two ways: label (renders as
aria-label) or ariaLabelledBy (points at an existing
element's id — preferred when the spinner sits next to text that already names it).
ariaValuetext defaults to "Loading..."; override it for
determinate states ("45% complete", "3 of 5 done", etc.).
Animation. The rotation is pure CSS — no JavaScript. The
.pf-v6-c-spinner__path circle uses stroke-dasharray /
stroke-dashoffset
animation; visit any standalone example route to verify the spin in isolation.