ProgressBar · ProgressRing

Barras y anillos de progreso controlados con estado indeterminado.

WebReact NativeProgreso

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

App.jsx

import { useEffect, useState } from 'react';
import {
  MotionNumber,
  ProgressBar,
  ProgressRing,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

export default function App({ indeterminate = false, thickness = 8, spring = 'default' }) {
  const [progress, setProgress] = useState(35);
  const [uploading, setUploading] = useState(false);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];
  const value = indeterminate ? null : progress;

  // A pretend upload: a new value every 350 ms until it reaches 100.
  useEffect(() => {
    if (!uploading) return;
    if (progress >= 100) {
      setUploading(false);
      return;
    }
    const timer = setTimeout(() => setProgress(Math.min(100, progress + 7 + (progress % 5))), 350);
    return () => clearTimeout(timer);
  }, [uploading, progress]);

  return (
    <div className="stage">
      <div className="ring">
        <ProgressRing
          value={value}
          size={120}
          thickness={thickness}
          color="#176b52"
          trackColor="#eaf6f0"
          transition={transition}
        >
          <strong>{indeterminate ? '…' : <MotionNumber value={progress} suffix="%" />}</strong>
        </ProgressRing>
      </div>
      <ProgressBar
        className="bar"
        value={value}
        thickness={thickness}
        color="#176b52"
        trackColor="#eaf6f0"
        transition={transition}
      />
      <div className="buttons">
        <button
          className="primary"
          onClick={() => {
            setProgress(0);
            setUploading(true);
          }}
        >
          Start upload
        </button>
        <button onClick={() => setProgress(Math.min(100, progress + 10))}>+10%</button>
        <button onClick={() => setProgress(Math.max(0, progress - 25))}>−25%</button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px;
}

.ring strong {
  font:
    800 24px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.bar {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons .primary {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

Uso mínimo

Upload.jsx

<ProgressBar value={progress} max={100} />
<ProgressRing value={progress} size={96}>{progress}%</ProgressRing>
<ProgressBar value={null} /> {/* indeterminate */}

Lo que resuelve por ti

Los valores se limitan a 0…max, y null muestra un barrido indeterminado o un arco que gira.
Un valor nuevo a mitad de movimiento continúa con su velocidad.
Una línea o un arco continuos, nunca segmentos que saltan.
Un resorte con duration termina exactamente en ese momento.

Úsalo para

La subida de un archivo.
El almacenamiento usado de una cuota.
El progreso de un pago.

Props

`ProgressBar`

Prop	Tipo	Por defecto	Descripción
`value`	`number \| null`		Progreso de `0` a `max`; `null` es indeterminado.
`max`	`number`	`100`	El valor que significa completo.
`color`	`string`	`'currentColor'`	Color del relleno.
`trackColor`	`string`	`'#e7ece9'`	Color de la pista.
`thickness`	`number`	`8`	Grosor de la línea en píxeles.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Rellenar desde la izquierda (`ltr`) o desde la derecha (`rtl`).
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

`ProgressRing`

Prop	Tipo	Por defecto	Descripción
`value`	`number \| null`		Progreso de `0` a `max`; `null` es indeterminado.
`max`	`number`	`100`	El valor que significa completo.
`size`	`number`	`96`	Diámetro en píxeles.
`thickness`	`number`	`8`	Grosor del anillo en píxeles.
`color`	`string`	`'currentColor'`	Color del arco.
`trackColor`	`string`	`'#e7ece9'`	Color de la pista.
`children`	`ReactNode`		Una etiqueta que se muestra en el centro.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

ProgressRing acepta hijos como etiqueta central; ProgressBar acepta direction para llenarse desde la derecha.

Los mismos componentes y props funcionan en React Native.