ProgressBar · ProgressRing

Kontrollerte fremdriftslinjer og -ringer med en ubestemt tilstand.

WebReact NativeFremdrift

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Upload.jsx

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

Dette tar den seg av

Verdier begrenses til 0…max, og null viser et ubestemt sveip eller en snurrende bue.
En ny verdi midt i en bevegelse fortsetter med hastigheten sin.
Én sammenhengende linje eller bue, aldri segmenter som hopper.
En fjær med duration slutter nøyaktig på det tidspunktet.

Bruk den til

En filopplasting.
Brukt plass av en kvote.
Fremdrift gjennom en kasse.

Props

`ProgressBar`

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremdrift fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Verdien som betyr fullført.
`color`	`string`	`'currentColor'`	Fyllfarge.
`trackColor`	`string`	`'#e7ece9'`	Sporfarge.
`thickness`	`number`	`8`	Linjetykkelse i piksler.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Fyll fra venstre (`ltr`) eller fra høyre (`rtl`).
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

`ProgressRing`

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremdrift fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Verdien som betyr fullført.
`size`	`number`	`96`	Diameter i piksler.
`thickness`	`number`	`8`	Ringtykkelse i piksler.
`color`	`string`	`'currentColor'`	Buens farge.
`trackColor`	`string`	`'#e7ece9'`	Sporfarge.
`children`	`ReactNode`		En etikett i midten.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

ProgressRing tar barn som etikett i midten; ProgressBar tar direction for å fylle fra høyre.

De samme komponentene og props fungerer i React Native.