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 ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ.