AnimatedCircularProgressBar
Indicador circular de progreso animado.
- Código: RODD·MI·036
- Familia: Microinteracciones
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/animated-circular-progress-bar.json"
Cuándo usarlo
Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| max | number | 100 |
| min | number | 0 |
| value | number | 0 |
| gaugePrimaryColor | string | |
| gaugeSecondaryColor | string | |
| className | string | |
Otros efectos de microinteracciones
- DodgeField — El contenido huye del puntero dentro de un área.
- HoldButton — Botón de “mantén para confirmar” con relleno líquido.
- PaperCrumple — Imagen que se arruga como papel al mantenerla pulsada.
- RainbowButton — Botón con un borde arcoíris animado.
- ShimmerButton — Botón con un destello que recorre su borde.
- SloshGauge — Indicador de depósito con líquido que se mueve con inercia.