StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Progress } from "stofli-ui";

Cargando...

Una barra de progreso 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 striped para añadir un patrón de rayas animado.

Cargando...

Puedes personalizar cualquier parte del componente usando la propiedad 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 de la barra de progreso
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"`	`"default"`	Variante de estilo
`showValue`	`boolean`	`false`	Muestra el porcentaje actual
`animate`	`boolean`	`true`	Habilita la animación de progreso
`label`	`string`	-	Etiqueta descriptiva
`radius`	`"none" \| "sm" \| "md" \| "full"`	`"md"`	Radio de las esquinas
`striped`	`boolean`	`false`	Añade un patrón de rayas animado
`indeterminate`	`boolean`	`false`	Muestra una barra de progreso indeterminada
`description`	`string`	-	Descripción accesible adicional
`aria-label`	`string`	-	Etiqueta ARIA personalizada
`aria-labelledby`	`string`	-	ID del elemento que etiqueta este componente
`aria-describedby`	`string`	-	ID del elemento que describe este componente
`id`	`string`	-	ID personalizado para el componente
`valueText`	`string`	-	Texto personalizado para el valor ARIA
`className`	`string`	-	Clases adicionales para el track de progreso
`containerClassName`	`string`	-	Clases para el contenedor principal
`labelClassName`	`string`	-	Clases para la etiqueta de progreso
`valueClassName`	`string`	-	Clases para el valor de porcentaje
`progressBarClassName`	`string`	-	Clases para la barra de progreso activa

Progress