StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { CircularProgress } from "stofli-ui";

Cargando...

Un progreso circular simple con diferentes valores.

Cargando...

Usando la prop size: sm, md y lg.

Cargando...

Usando la prop variant: default, primary, secondary, success, warning y danger.

Cargando...

Usando la prop label y labelPosition para mostrar etiquetas arriba o abajo.

Cargando...

Usando la prop thickness para ajustar el grosor del círculo.

Cargando...

Ejemplos de diferentes estados de carga usando spin y etiquetas.

Cargando...

Personaliza cualquier parte del progreso circular usando las propiedades de className con clases de Tailwind CSS.

Cargando...

Prop	Tipo	Default	Descripción
`value`	`number`	`0`	Valor actual del progreso
`max`	`number`	`100`	Valor máximo del progreso
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tamaño del círculo de progreso
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"`	`"default"`	Variante de estilo
`showValue`	`boolean`	`false`	Muestra el porcentaje actual
`thickness`	`number`	`3`	Grosor del círculo de progreso
`label`	`string`	-	Etiqueta descriptiva
`labelPosition`	`"top" \| "bottom"`	`"top"`	Posición de la etiqueta
`animate`	`boolean`	`true`	Habilita la animación de progreso
`spin`	`boolean`	`false`	Añade animación de rotación
`className`	`string`	-	Clases para el contenedor principal
`circleClassName`	`string`	-	Clases para el círculo de progreso
`bgCircleClassName`	`string`	-	Clases para el círculo de fondo
`valueClassName`	`string`	-	Clases para el texto del valor
`labelClassName`	`string`	-	Clases para la etiqueta
`formatOptions`	`Intl.NumberFormatOptions`	`{ style: "percent", maximumFractionDigits: 0 }`	Opciones para formatear el valor
`aria-label`	`string`	-	Etiqueta ARIA personalizada
`aria-describedby`	`string`	-	ID del elemento que describe el progreso
`aria-valuetext`	`string`	-	Texto descriptivo del valor para lectores de pantalla
`indeterminate`	`boolean`	`false`	Muestra un estado de carga indeterminado

Circular Progress