Feedback

Spinner

@xui/spinner

A circular progress indicator.

Install

pnpm add @xui/spinner

Add the barrel to a standalone component's imports:

import { XuiSpinnerImports } from '@xui/spinner';

@Component({
  imports: [XuiSpinnerImports],
  // …
})

Loading preview…

<xui-spinner color="primary" size="md">Loading</xui-spinner>

component

xui-spinner

A circular progress indicator.

Variants

Axis

Options

Default

size

md

color

primary

secondary

success

error

warning

info

inherit

primary

Inputs

Name

Type

Default

class

ClassValueThe user-defined classes. Merged last so they win over the variant classes.

''

color

XuiSpinnerVariants['color']Intent colour of the arc.

this.config.color

size

XuiSpinnerVariants['size']Diameter, from the shared control scale, so a spinner matches the control it replaces.

this.config.size

value

number | null | undefinedHow far along the operation is, between 0 and 1. Out-of-range values are clamped. Leave it unset to spin indefinitely.

undefined