ProgressBar · ProgressRing

Bilah dan cincin progres terkendali dengan keadaan tak tentu.

WebReact NativeProgres

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Upload.jsx

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

Yang ditanganinya untuk Anda

Nilai dibatasi ke 0…max, dan null menampilkan sapuan tak tentu atau busur yang berputar.
Nilai baru di tengah gerak berlanjut dengan kecepatannya.
Satu garis atau busur yang utuh, tidak pernah segmen yang melompat.
Pegas dengan duration berakhir tepat pada waktu itu.

Gunakan untuk

Unggahan file.
Penyimpanan terpakai dari kuota.
Progres melalui checkout.

Props

`ProgressBar`

Prop	Tipe	Bawaan	Deskripsi
`value`	`number \| null`		Progres dari `0` sampai `max`; `null` berarti tak tentu.
`max`	`number`	`100`	Nilai yang berarti selesai.
`color`	`string`	`'currentColor'`	Warna isian.
`trackColor`	`string`	`'#e7ece9'`	Warna trek.
`thickness`	`number`	`8`	Ketebalan garis dalam piksel.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Mengisi dari kiri (`ltr`) atau dari kanan (`rtl`).
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

`ProgressRing`

Prop	Tipe	Bawaan	Deskripsi
`value`	`number \| null`		Progres dari `0` sampai `max`; `null` berarti tak tentu.
`max`	`number`	`100`	Nilai yang berarti selesai.
`size`	`number`	`96`	Diameter dalam piksel.
`thickness`	`number`	`8`	Ketebalan cincin dalam piksel.
`color`	`string`	`'currentColor'`	Warna busur.
`trackColor`	`string`	`'#e7ece9'`	Warna trek.
`children`	`ReactNode`		Label yang ditampilkan di tengah.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

ProgressRing menerima children untuk label di tengah; ProgressBar menerima direction untuk mengisi dari kanan.

Komponen dan props yang sama bekerja di React Native.