Vibeset

Marca de estado

Cinco estados (pendiente, en curso, hecho, fallo y cancelado) en un SVG que dibuja su trazo al pasar de uno a otro, en lugar de cambiar de icono de golpe. Lo que no se ve: el estado nunca se dice solo con el dibujo, porque un círculo verde con un tick no sirve a quien no ve el color. Cada marca lleva su palabra en un texto solo para lectores («Hecho», «En curso, 40 %»). Todos los trazos miden 1, así que dibujar un anillo, un tick o una cruz es la misma cuenta. Con porcentaje el anillo se llena; sin él gira un arco, que es lo honesto cuando no se sabe cuánto falta.

Y el original de React Bits: Status Mark

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Status Mark, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

En una lista de pasos o de tareas: instalación, despliegue, comprobaciones. Sustituye a un spinner genérico y a un check suelto.

Ojo con

Poco que objetar: pequeña, de SVG y con una dependencia. Comprueba que el estado también se dice con palabras y no solo con el trazo.

Accesibilidad

Cuatro señales aria y movimiento reducido (seis referencias en el código).