Feedback

ProgressSpinner

Spinner SVG circolare per indicare caricamento o progresso. Supporta modalità indeterminate e determinate, severity colorata e label.

Nota deprecazione: L'alias Spinner è deprecato. Usare ProgressSpinner.

Import

import { ProgressSpinner } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`type`	`'indeterminate' \| 'determinate'`	`'indeterminate'`	Modalità dello spinner
`value`	`number`	`0`	Valore corrente (usato solo in modalità `determinate`)
`max`	`number`	`100`	Valore massimo (usato solo in modalità `determinate`)
`size`	`'small' \| 'medium' \| 'large' \| 'xlarge'`	`'medium'`	Dimensione dello spinner
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Colore dell'indicatore e della label
`strokeWidth`	`number`	`2`	Spessore del tratto SVG in pixel
`label`	`string \| null`	`null`	Testo mostrato sotto lo spinner
`icon`	`string \| null`	`null`	Icona CSS custom (sostituisce lo spinner SVG)
`ariaLabel`	`string`	—	Label ARIA per screen reader (default: testo localizzato)

Slot

Slot	Scope	Descrizione
`default`	—	Testo label custom (alternativa alla prop `label`)

Esempi

Dimensioni e severity

Modalità determinate (progresso circolare)

Con icona custom

Spinner in bottone durante caricamento

Label via slot

Alias deprecato

// DEPRECATED — non usare:
import { Spinner } from '@pzeta/vue-components'

// CORRETTO:
import { ProgressSpinner } from '@pzeta/vue-components'

Accessibilità

Il componente ha role="status" e aria-live="polite".
aria-label è impostato automaticamente con testo localizzato ("Caricamento...").
Fornire ariaLabel personalizzato per contestualizzare lo spinner (es. "Salvataggio del documento").

TypeScript

import type { ProgressSpinnerProps } from '@pzeta/vue-components'
import type { ProgressSpinnerType } from '@pzeta/vue-components'

// ProgressSpinnerType = 'indeterminate' | 'determinate'

ProgressBar

Barra di avanzamento per mostrare il progresso di un'operazione. Supporta modalità determinate e indeterminate, striped, animated e severity colorata.

Skeleton

Placeholder animato che simula la forma del contenuto durante il caricamento. Supporta shape rettangolare e circolare con animazioni wave, pulse e none.