ProgressBar · ProgressRing

Kontrollerade förloppsstaplar och -ringar med ett obestämt läge.

WebbReact NativeFörlopp

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Upload.jsx

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

Det här sköter den åt dig

Värden begränsas till 0…max, och null visar ett obestämt svep eller en snurrande båge.
Ett nytt värde mitt i en rörelse fortsätter med sin hastighet.
En sammanhängande linje eller båge, aldrig segment som hoppar.
En fjäder med duration slutar exakt vid den tiden.

Använd den för

En filuppladdning.
Använt utrymme av en kvot.
Förlopp genom en kassa.

Props

`ProgressBar`

Prop	Typ	Standard	Beskrivning
`value`	`number \| null`		Förlopp från `0` till `max`; `null` är obestämt.
`max`	`number`	`100`	Värdet som betyder klart.
`color`	`string`	`'currentColor'`	Fyllningsfärg.
`trackColor`	`string`	`'#e7ece9'`	Spårets färg.
`thickness`	`number`	`8`	Linjetjocklek i pixlar.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Fyll från vänster (`ltr`) eller från höger (`rtl`).
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

`ProgressRing`

Prop	Typ	Standard	Beskrivning
`value`	`number \| null`		Förlopp från `0` till `max`; `null` är obestämt.
`max`	`number`	`100`	Värdet som betyder klart.
`size`	`number`	`96`	Diameter i pixlar.
`thickness`	`number`	`8`	Ringens tjocklek i pixlar.
`color`	`string`	`'currentColor'`	Bågens färg.
`trackColor`	`string`	`'#e7ece9'`	Spårets färg.
`children`	`ReactNode`		En etikett i mitten.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

ProgressRing tar barn som en etikett i mitten; ProgressBar tar direction för att fyllas från höger.

Samma komponenter och props fungerar i React Native.