Vitral 0.2
Messages

ProgressSpinner

A ring that turns while something is running, or fills clockwise to a value.

WAI-ARIA tested

Import

main.ts
import { ProgressSpinner } from '@vitral/vue';

Indeterminate

Three sizes and stroke widths.

<script setup lang="ts">import { ProgressSpinner } from '@vitral/vue';</script> <template>    <ProgressSpinner size="1rem" :stroke-width="4" />    <ProgressSpinner />    <ProgressSpinner size="3rem" :stroke-width="2.5" />    <ProgressSpinner size="4rem" :stroke-width="2" animation-duration="3s" aria-label="Loading slowly" /></template>

Determinate

A value from 0 to 100 draws the ring’s share of a full turn over a faint track.

<script setup lang="ts">import { ProgressSpinner } from '@vitral/vue';</script> <template>    <ProgressSpinner :value="25" aria-label="25% done" />    <ProgressSpinner :value="50" aria-label="Half done" />    <ProgressSpinner :value="80" size="3rem" aria-label="80% done" /></template>

Colour

Per-instance tokens with `dt`.

<script setup lang="ts">import { ProgressSpinner } from '@vitral/vue';</script> <template>    <ProgressSpinner :dt="{ progressspinner: { color: '{success.color}' } }" />    <ProgressSpinner :dt="{ progressspinner: { color: '{danger.color}' } }" />    <ProgressSpinner :dt="{ progressspinner: { color: '{warn.color}' } }" /></template>

API

Read from packages/vue/src/components/ProgressSpinner/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
sizestring | numberWidth and height: a CSS length, or pixels. Defaults to the `size` token (2rem).
strokeWidthnumberStroke thickness, in units of a 32-unit ring, so pixels at the default size. Defaults to 3.
valuenumber0–100 draws a determinate ring; leave it out for the turning arc.
animationDurationstringOne turn of the indeterminate arc, as a CSS time.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.