21 lines
No EOL
703 B
JavaScript
21 lines
No EOL
703 B
JavaScript
import { clamp } from "../../features/math/clamp.js";
|
|
import styles from "./ProgressBar.module.css";
|
|
|
|
/**
|
|
* @param {object} props
|
|
* @param {number} props.fillPercentage
|
|
* @param {string} props.fillColor
|
|
* @param {string} props.backgroundColor
|
|
* @param {string} props.align
|
|
* @param {string} props.className
|
|
*/
|
|
export function ProgressBar({ fillPercentage, fillColor, backgroundColor, align = "left", className = "" }) {
|
|
return (
|
|
<div className={`${styles.Container} ${className}`} style={{ backgroundColor: backgroundColor }}>
|
|
<div
|
|
className={`${styles.Fill} ${align}`}
|
|
style={{ backgroundColor: fillColor, "--fill": `${clamp(fillPercentage, 0.1, 100)}%` }}
|
|
/>
|
|
</div>
|
|
);
|
|
} |