Anillo de progreso

Anillo de progreso con degradado, punta luminosa que lo encabeza y un número que cuenta; con un clic se llena de nuevo.

Vista previa en vivo

0%Completado

Instalación

1. Configura el registro Pro una sola vez

Los componentes Pro no están en npm ni en el registro público de shadcn: se instalan con tu licencia desde el registro privado de Furin.

2. Instala Anillo de progreso

npx shadcn@latest add @furin-pro/progress-ring

Prop	Tipo	Por defecto	Descripción
value	number	78	Porcentaje que marca el anillo (0 a 100).
label	string	"Completado"	Texto pequeño bajo el número.
size	number	240	Diámetro del anillo, en px.
thickness	number	14	Grosor del trazo, en px.
from	string	"#5b6bff"	Color con el que empieza el arco.
to	string	"#72f5e6"	Color de la punta luminosa.
ticks	boolean	true	Muestra las marcas de reloj alrededor del anillo.
bounce	number	0.3	Cuánto se pasa y oscila la punta antes de asentarse (0 a 1).
wander	boolean	false	Cambia el valor solo cada pocos segundos (útil en demos).
interval	number	3.6	Segundos entre cambios cuando wander está activo.

Carrera de barras
Pro
Barras que compiten ronda tras ronda: crecen con resorte y las filas se reordenan cuando alguien rebasa a otro.
Datos
Dona
Pro
Gráfica de dona que se arma por segmentos con leyenda; al pasar el cursor, un segmento se separa y el resto se atenúa.
Datos
Minigráfica
Pro
Línea de tendencia que se dibuja con un punto que la encabeza, área suave y un punto vivo que late al final; el cursor muestra el valor de cada punto y un doble clic la dibuja de nuevo.
Datos