Vitral 0.2
Mensagens

ProgressSpinner

Um anel que gira enquanto algo está em andamento, ou se preenche no sentido horário até um valor.

Testado com WAI-ARIA

Importação

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

Indeterminado

Três tamanhos e espessuras de traço.

<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>

Determinado

Um valor de 0 a 100 desenha a fração do anel correspondente a uma volta inteira, sobre uma trilha suave.

<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>

Cor

Tokens por instância com `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

Lido de packages/vue/src/components/ProgressSpinner/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
sizestring | numberLargura e altura: um comprimento CSS, ou pixels. O padrão é o token `size` (2rem).
strokeWidthnumberEspessura do traço, em unidades de um anel de 32 unidades, ou seja, pixels no tamanho padrão. O padrão é 3.
valuenumber0–100 desenha um anel determinado; omita-o para o arco girando.
animationDurationstringUma volta do arco indeterminado, como um tempo CSS.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.