ProgressBar · ProgressRing

Kontrollierte Fortschrittsbalken und -ringe mit unbestimmtem Zustand.

WebReact NativeFortschritt

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

Upload.jsx

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

Was sie dir abnimmt

Werte werden auf 0…max begrenzt, und null zeigt einen unbestimmten Lauf oder einen rotierenden Bogen.
Ein neuer Wert mitten in der Bewegung setzt mit seinem Tempo fort.
Eine durchgehende Linie oder ein Bogen, nie springende Segmente.
Eine Feder mit duration endet genau zu diesem Zeitpunkt.

Gut für

Ein Datei-Upload.
Belegter Speicher eines Kontingents.
Fortschritt durch einen Checkout.

props

`ProgressBar`

Prop	Typ	Standard	Beschreibung
`value`	`number \| null`		Fortschritt von `0` bis `max`; `null` ist unbestimmt.
`max`	`number`	`100`	Der Wert, der „fertig“ bedeutet.
`color`	`string`	`'currentColor'`	Füllfarbe.
`trackColor`	`string`	`'#e7ece9'`	Farbe der Spur.
`thickness`	`number`	`8`	Linienstärke in Pixeln.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Von links (`ltr`) oder von rechts (`rtl`) füllen.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

`ProgressRing`

Prop	Typ	Standard	Beschreibung
`value`	`number \| null`		Fortschritt von `0` bis `max`; `null` ist unbestimmt.
`max`	`number`	`100`	Der Wert, der „fertig“ bedeutet.
`size`	`number`	`96`	Durchmesser in Pixeln.
`thickness`	`number`	`8`	Ringstärke in Pixeln.
`color`	`string`	`'currentColor'`	Bogenfarbe.
`trackColor`	`string`	`'#e7ece9'`	Farbe der Spur.
`children`	`ReactNode`		Eine Beschriftung in der Mitte.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

ProgressRing nimmt Kinder für eine Beschriftung in der Mitte; ProgressBar nimmt direction, um von rechts zu füllen.

Dieselben Komponenten und props funktionieren unter React Native.