Spinner

<ts-spinner> vv0.4.0

The ts-spinner component.

Open in Storybook for interactive demos.

Preview

<ts-spinner color="currentColor" label="Loading" size="md"></ts-spinner>

Properties

Property	Attribute	Type	Default	Description
color	color	string	'currentColor'	The color of the spinning indicator.
label	label	string	'Loading'	Accessible label for screen readers.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The size of the spinner.

CSS Parts

Use ::part() to style internal elements:

Part	Description
indicator	The spinning indicator arc.
svg	The SVG element.
track	The background track circle.

ts-spinner::part(indicator) {
  /* your custom styles */
}

Usage

HTML

<ts-spinner color="currentColor" label="Loading" size="md"></ts-spinner>

React

import { TsSpinner } from '@tessera-ui/react';

<TsSpinner color="currentColor" label="Loading"></TsSpinner>