Examples
Basic
The default ripple. A fixed 64px indicator with gray (#ccc) rings and an accessible label
of "Loading".
Custom color
Pass color with any CSS color — a hex value, named color, or a PF design token like
var(--pf-t--global--color--brand--default) — to tint the rings via
--pha-ripple-color.
On dark surface
The original loading.io ripple used white rings. Set
color="#fff" when placing the indicator over a dark background.
color="#fff") read clearly on a dark surface.
Documentation
Ripple props
Parameters accepted by
{#include components/feedback/ripple ... /}. All are passed as Qute named
parameters.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — |
DOM id on the root <div>. Omit unless something references the
ripple.
|
label
|
String |
"Loading"
|
Accessible name rendered as aria-label on the
role="progressbar" root.
|
color
|
CSS color (e.g. "#fff", a token)
|
#ccc
|
Sets --pha-ripple-color inline to recolor the expanding rings.
|
Usage
Stylesheet. Unlike PatternFly components, the ripple ships its own CSS. Link
/web/css/components/ripple.css once on any page that uses it (it is not part of the
global bundle).
Fixed size. The animation's keyframe offsets are absolute pixels, so the indicator is a fixed 64px
square — there is no size parameter. To scale it, wrap it and apply a CSS
transform: scale() on the wrapper.
Accessibility. The root carries role="progressbar" with an
aria-label (default "Loading"). The two ring
<div>s are decorative. Override label to describe
what is loading.
Spinner vs. ripple. For a PatternFly-native indeterminate indicator with size tokens and inline mode, prefer the Spinner component. Reach for the ripple when you want its distinctive concentric-ring motion.