web-progess-bar
Version:
A customizable progress bar component for React
20 lines (19 loc) • 1.09 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { defaultProgressBarStyles } from "../Utils/styles";
function ProgressBar({ progress, color = defaultProgressBarStyles.color, height = defaultProgressBarStyles.height, borderRadius = defaultProgressBarStyles.borderRadius, backgroundColor = defaultProgressBarStyles.backgroundColor, duration = defaultProgressBarStyles.duration || "0.3s", timingFunction = defaultProgressBarStyles.timingFunction || "ease-in-out", delay = defaultProgressBarStyles.delay || "0s", }) {
return (_jsx("div", { style: {
width: "100%",
backgroundColor,
borderRadius,
overflow: "hidden",
}, children: _jsx("div", { style: {
width: `${progress}%`,
backgroundColor: color,
height,
borderRadius,
transition: `width ${duration} ${timingFunction} ${delay}`,
minWidth: progress > 0 ? "5px" : "0px",
willChange: "width",
} }) }));
}
export default ProgressBar;