Components
Usage
Import ProgressIndicator to show operation progress.
import { ProgressIndicator } from "@udixio/ui-react"<ProgressIndicator variant="linear-determinate" value={40} />Variants
- linear-determinate
linear-indeterminatecircular-determinate- circular-indeterminate
() => {
const [value, setValue] = React.useState(0);
const [resetKey, setResetKey] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setValue((prev) => {
const newValue = prev >= 10 ? 0 : prev + 3;
// Si la valeur retourne à 0, on incrémente la clé de réinitialisation
if (newValue === 0 && prev > 0) {
setResetKey(prevKey => prevKey + 1);
}
return newValue;
});
}, 1500);
return () => clearInterval(interval);
}, []);
return <div className="flex items-center gap-6">
<ProgressIndicator transitionDuration={300} key={resetKey} variant="linear-determinate" value={value * 10} className="w-48" />
<ProgressIndicator variant="circular-indeterminate" />
</div>
}