ProgressBar · ProgressRing

అనిశ్చిత స్థితితో నియంత్రిత పురోగతి బార్‌లు, వలయాలు.

వెబ్React Nativeపురోగతి

ప్రయత్నించండి

ఉదాహరణ సిద్ధమవుతోంది…

JavaScript ఆఫ్‌లో ఉంది. కింద ఉన్న కోడే పూర్తి ఉదాహరణ.

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

అతి చిన్న వాడకం

Upload.jsx

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

ఇది మీ కోసం నిర్వహించేది

విలువలు 0…max-కు పరిమితం చేయబడతాయి; null అనిశ్చిత స్వీప్ లేదా తిరిగే చాపం చూపిస్తుంది.
మోషన్ మధ్యలో కొత్త విలువ దాని వేగంతో కొనసాగుతుంది.
ఒకే నిరంతర రేఖ లేదా చాపం, దూకే ముక్కలు ఎప్పుడూ కాదు.
duration ఉన్న spring సరిగ్గా ఆ సమయానికి ముగుస్తుంది.

దీని కోసం వాడండి

ఫైల్ అప్‌లోడ్.
కోటాలో వాడిన స్టోరేజ్.
చెక్అవుట్ పురోగతి.

Props

`ProgressBar`

Prop	టైప్	డిఫాల్ట్	వివరణ
`value`	`number \| null`		`0` నుండి `max` వరకు పురోగతి; `null` అనిశ్చితం.
`max`	`number`	`100`	పూర్తి అని అర్థం వచ్చే విలువ.
`color`	`string`	`'currentColor'`	నింపు రంగు.
`trackColor`	`string`	`'#e7ece9'`	ట్రాక్ రంగు.
`thickness`	`number`	`8`	రేఖ మందం, పిక్సెల్‌లలో.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	ఎడమ నుండి (`ltr`) లేదా కుడి నుండి (`rtl`) నింపండి.
`transition`	`Transition`	`spring`	టైమింగ్ వక్రం `{ duration, easing }` లేదా spring `{ tempo: 'spring', spring }`. spring-లు అంతరాయం కలిగినప్పుడు తమ జడత్వాన్ని నిలుపుకుంటాయి.

`ProgressRing`

Prop	టైప్	డిఫాల్ట్	వివరణ
`value`	`number \| null`		`0` నుండి `max` వరకు పురోగతి; `null` అనిశ్చితం.
`max`	`number`	`100`	పూర్తి అని అర్థం వచ్చే విలువ.
`size`	`number`	`96`	వ్యాసం, పిక్సెల్‌లలో.
`thickness`	`number`	`8`	వలయం మందం, పిక్సెల్‌లలో.
`color`	`string`	`'currentColor'`	చాపం రంగు.
`trackColor`	`string`	`'#e7ece9'`	ట్రాక్ రంగు.
`children`	`ReactNode`		మధ్యలో చూపబడే లేబుల్.
`transition`	`Transition`	`spring`	టైమింగ్ వక్రం `{ duration, easing }` లేదా spring `{ tempo: 'spring', spring }`. spring-లు అంతరాయం కలిగినప్పుడు తమ జడత్వాన్ని నిలుపుకుంటాయి.

ఇతర props రెండర్ అయ్యే ఎలిమెంట్‌కు వెళ్తాయి; అందువల్ల className, style, ఈవెంట్ హ్యాండ్లర్లు యథావిధిగా పనిచేస్తాయి.

వెబ్, React Native

ProgressRing మధ్యలో లేబుల్ కోసం పిల్లలను తీసుకుంటుంది; ProgressBar కుడి నుండి నింపడానికి direction తీసుకుంటుంది.

అవే కాంపోనెంట్లు, props React Native-లో పనిచేస్తాయి.