Spinner

The spinner indicates that a process is in progress. Use it to signal that the system is working, for example while loading data or performing a long calculation.

Accessibility

Without a label the spinner is purely decorative and hidden from assistive technology (aria-hidden). Provide a label to expose it as a live status (role="status") so screen readers announce what is loading.

Props

color?: FluxColor
The color of the spinner.

label?: string
An accessible label describing what is loading. When set, the spinner is announced as a status by assistive technology.

size?: number
The size of the spinner.

Examples

Basic

A basic spinner.

Preview

Code

<template>
    <FluxSpinner/>
</template>

<script
    setup
    lang="ts">
    import { FluxSpinner } from '@flux-ui/components';
</script>

Colors

Use the color prop to match the spinner to its context.

Preview

Code

<template>
    <FluxFlex
        direction="horizontal"
        :gap="21">
        <FluxSpinner
            color="primary"
            :size="36"/>

        <FluxSpinner
            color="danger"
            :size="36"/>

        <FluxSpinner
            color="info"
            :size="36"/>

        <FluxSpinner
            color="success"
            :size="36"/>

        <FluxSpinner
            color="warning"
            :size="36"/>

        <FluxSpinner
            color="gray"
            :size="36"/>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxSpinner } from '@flux-ui/components';
</script>