Accept props: value (current), max (default 100), color (optional override), height (default 20), showLabel (default true). Calculate percentage internally. Default color based on progress if not provided. This makes the component flexible for different use cases.
Create a functional component with props (value, max, color, height, showLabel). Calculate percent = Math.max(0, Math.min(100, (value / max) * 100)). Set the fill width to percent%. Add CSS transition. Include ARIA attributes for accessibility.
Use useState for the value and useEffect with setInterval. setValue(v => v + 1) every 50ms. Clear the interval when v >= 100. Return () => clearInterval(interval) from useEffect for cleanup.
Return () => clearInterval(interval) from useEffect. This clears the interval when the component unmounts, preventing memory leaks and state updates on an unmounted component.
Browse all our FAQs or reach out to our support team
Your learning library
Find your next course. Build something great.
