Progress Bar
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Usage
Progress
component takes invalue
prop.value
prop is the percentage value of the progress bar. It is a required prop. It acceptsnumber
value between0
and100
.- You can use
useState
hook in concert withuseEffect
hook to update the value of the progress bar.
Example of updating progress
import { Progress } from ".dubsui;
import { useState, useEffect } from "react";
const Primary = () => {
const [progress, setProgress] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setProgress((prev) => (prev + 1) % 101);
}, 100);
if (progress === 100) clearInterval(interval);
return () => clearInterval(interval);
}, []);
return <Progress value={progress} />;
};