Loading Ring

Use bo-loading-ring when a loading indicator should feel more dimensional than a single rotating stroke. It uses two intersecting SVG rings and remains centered without the wobble caused by pseudo-element box shadows.

Basic Usage

<bo-loading-ring />

Sizes, Colors, and Text

<bo-loading-ring size="lg" variant="primary" loader-text="Loading..." text-position="after" />

API

bo-loading-ring accepts the same loader props as bo-loading-spinner, including size, variant, loaderText, textPosition, customColor, ariaLabel, ariaLive, and ariaBusy. It also accepts customContainerCssClass and customRingClass, and exposes a default slot for replacement text content.

Loading Ring ​

Basic Usage ​

Sizes, Colors, and Text ​

API ​

Loading Ring

Basic Usage

Sizes, Colors, and Text

API