# components/SegmentSpinner (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/SegmentSpinner.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/SegmentSpinner.tsx).

## Components

### `SegmentSpinner`

Component.

Renders a busy indicator of five pills that fill left to right, then drain, matching the
terminal UI's segment bar. It is a `status` element, pure CSS, and static under reduced motion.

```ts
function SegmentSpinner(props: SegmentSpinnerProps): Element
```

**Parameters**

- `props` (`SegmentSpinnerProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the spinner.
- `label?` (`string`): Accessible name and tooltip. Defaults to the `working` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `size?` (`Size`): `xs` fits 10px text (Timeline badges), `sm` 12–13px, `md` header/footer.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `tone?` (`Tone`, default `'inherit'`): Colour of the pills. `inherit` follows the surrounding text colour.

Source: [ui/src/components/SegmentSpinner.tsx:58](https://github.com/Tahul/zidane/blob/main/ui/src/components/SegmentSpinner.tsx#L58)

## Interfaces

### `SegmentSpinnerProps`

Interface.

Props for [`SegmentSpinner`](https://zidane.si/docs/reference/ui-components-segment-spinner.md#SegmentSpinner).

```ts
interface SegmentSpinnerProps
```

**Properties**

- `className?` (`string`): Extra classes on the spinner.
- `label?` (`string`): Accessible name and tooltip. Defaults to the `working` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `size?` (`Size`): `xs` fits 10px text (Timeline badges), `sm` 12–13px, `md` header/footer.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `tone?` (`Tone`, default `'inherit'`): Colour of the pills. `inherit` follows the surrounding text colour.

Source: [ui/src/components/SegmentSpinner.tsx:20](https://github.com/Tahul/zidane/blob/main/ui/src/components/SegmentSpinner.tsx#L20)