ProgressBar · ProgressRing

Gecontroleerde voortgangsbalken en -ringen met een onbepaalde status.

WebReact NativeVoortgang

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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;
}

Kortste gebruik

Upload.jsx

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

Wat het voor je regelt

Waarden worden begrensd tot 0…max, en null toont een onbepaalde veeg of een draaiende boog.
Een nieuwe waarde midden in een beweging gaat door met haar snelheid.
Eén doorlopende lijn of boog, nooit segmenten die springen.
Een veer met duration eindigt precies op dat moment.

Gebruik het voor

Een bestandsupload.
Gebruikte opslag van een quotum.
Voortgang door het afrekenen.

Props

`ProgressBar`

Prop	Type	Standaard	Beschrijving
`value`	`number \| null`		Voortgang van `0` tot `max`; `null` is onbepaald.
`max`	`number`	`100`	De waarde die voltooid betekent.
`color`	`string`	`'currentColor'`	Vulkleur.
`trackColor`	`string`	`'#e7ece9'`	Kleur van de baan.
`thickness`	`number`	`8`	Lijndikte in pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Vullen vanaf links (`ltr`) of vanaf rechts (`rtl`).
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

`ProgressRing`

Prop	Type	Standaard	Beschrijving
`value`	`number \| null`		Voortgang van `0` tot `max`; `null` is onbepaald.
`max`	`number`	`100`	De waarde die voltooid betekent.
`size`	`number`	`96`	Diameter in pixels.
`thickness`	`number`	`8`	Ringdikte in pixels.
`color`	`string`	`'currentColor'`	Kleur van de boog.
`trackColor`	`string`	`'#e7ece9'`	Kleur van de baan.
`children`	`ReactNode`		Een label in het midden.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

ProgressRing neemt kinderen voor een label in het midden; ProgressBar neemt direction om vanaf rechts te vullen.

Dezelfde componenten en props werken in React Native.