ProgressBar · ProgressRing

Kontrollerede fremskridtsbjælker og -ringe med en ubestemt tilstand.

WebReact NativeFremskridt

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Upload.jsx

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

Det klarer den for dig

Værdier begrænses til 0…max, og null viser et ubestemt sweep eller en roterende bue.
En ny værdi midt i en bevægelse fortsætter med sin hastighed.
Én sammenhængende linje eller bue, aldrig segmenter, der hopper.
En fjeder med duration slutter præcis på det tidspunkt.

Brug den til

En filupload.
Brugt plads af en kvote.
Fremskridt gennem en kasse.

Props

`ProgressBar`

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremskridt fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Værdien, der betyder færdig.
`color`	`string`	`'currentColor'`	Fyldfarve.
`trackColor`	`string`	`'#e7ece9'`	Sporets farve.
`thickness`	`number`	`8`	Linjetykkelse i pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Fyld fra venstre (`ltr`) eller fra højre (`rtl`).
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

`ProgressRing`

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremskridt fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Værdien, der betyder færdig.
`size`	`number`	`96`	Diameter i pixels.
`thickness`	`number`	`8`	Ringens tykkelse i pixels.
`color`	`string`	`'currentColor'`	Buens farve.
`trackColor`	`string`	`'#e7ece9'`	Sporets farve.
`children`	`ReactNode`		En etiket i midten.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

ProgressRing tager børn som etiket i midten; ProgressBar tager direction for at fylde fra højre.

De samme komponenter og props virker i React Native.