Base

Class	Description
.ui-spinner	Base class

Size

Class	Value
.ui-spinner--xs	xs
.ui-spinner--sm	sm
.ui-spinner--lg	lg
.ui-spinner--xl	xl

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-spinner-size	calc(var(--ui-unit) * 4)	Overall size
--ui-spinner-border-width	var(--ui-border-width-md)	Border thickness
--ui-spinner-color	currentcolor	Text color
--ui-spinner-track-color	transparent	Track text color
--ui-spinner-duration	var(--ui-spinner-duration)	Animation duration
--ui-spinner-size-xs	calc(var(--ui-unit) * 2)	Overall size at extra-small size
--ui-spinner-border-width-xs	var(--ui-border-width-sm)	Border thickness at extra-small size
--ui-spinner-size-sm	calc(var(--ui-unit) * 3)	Overall size at small size
--ui-spinner-border-width-sm	var(--ui-border-width-md)	Border thickness at small size
--ui-spinner-size-lg	calc(var(--ui-unit) * 5)	Overall size at large size
--ui-spinner-border-width-lg	var(--ui-border-width-md)	Border thickness at large size
--ui-spinner-size-xl	calc(var(--ui-unit) * 6)	Overall size at extra-large size
--ui-spinner-border-width-xl	var(--ui-border-width-lg)	Border thickness at extra-large size

<div class="ui-spinner ui-spinner--xs"></div>

<div class="ui-spinner ui-spinner--sm"></div>

<div class="ui-spinner ui-spinner--lg"></div>

<div class="ui-spinner ui-spinner--xl"></div>

<div class="ui-spinner"></div>

<div class="ui-row" style="gap: var(--ui-space-2);">
  <div style="color: var(--ui-color-primary);"><div class="ui-spinner"></div></div>
  <div style="color: var(--ui-color-danger);"><div class="ui-spinner"></div></div>
  <div style="color: var(--ui-color-success);"><div class="ui-spinner"></div></div>
</div>

<button class="ui-button ui-button--primary" disabled style="opacity: 0.7;">
  <div class="ui-spinner ui-spinner--xs"></div>
  <span>Loading...</span>
</button>