@re-flex/ui
Version:
Re-Flex ui library
56 lines (55 loc) • 2.55 kB
JavaScript
import { styled, useTheme } from "@re-flex/styles";
import { transparentize } from "color2k";
import React from "react";
import ProgressbarBase from "./ProgressbarBase";
const Progressbar = styled(ProgressbarBase)(({ theme: { prefix, palette, transitions } }) => ({
"--progressbar-bgcolor": transparentize(palette.primary.main, 0.85),
overflow: "hidden",
display: "block",
width: "100%",
height: "var(--progressbar-size)",
backgroundColor: "var(--progressbar-bgcolor)",
margin: "20px auto",
transition: "width var(--progressbar-linear-duration) var(--progressbar-timing-function)",
".determinate": {
position: "relative",
maxWidth: "100%",
height: "100%",
transition: "width var(--progressbar-linear-duration) var(--progressbar-timing-function)",
backgroundColor: "var(--progressbar-color)",
},
".indeterminate": {
position: "relative",
width: "100%",
height: "100%",
"&:before": {
content: '""',
position: "absolute",
height: "100%",
backgroundColor: "var(--progressbar-color)",
animation: `${prefix}-linear-progressbar-indeterminate-first var(--progressbar-linear-duration) infinite var(--progressbar-timing-function)`,
},
"&:after": {
content: '""',
position: "absolute",
height: "100%",
backgroundColor: "var(--progressbar-color)",
animation: `${prefix}-linear-progressbar-indeterminate-second var(--progressbar-linear-duration) infinite var(--progressbar-timing-function)`,
},
},
[`@keyframes ${prefix}-linear-progressbar-indeterminate-first`]: {
"0%": { left: "-100%", width: "100%" },
"100%": { left: "100%", width: "10%" },
},
[`@keyframes ${prefix}-linear-progressbar-indeterminate-second`]: {
"0%": { left: "-150%", width: "100%" },
"100%": { left: "100%", width: "10%" },
},
}));
const LinearProgressbar = ({ className, children, indeterminate = false, value = 0, ...rest }) => {
const theme = useTheme();
return (React.createElement(Progressbar, { role: "progressbar", className: [`${theme.prefix}-progressbar linear`, className]
.filter(Boolean)
.join(" "), ...rest }, indeterminate === false ? (React.createElement("div", { className: "determinate", style: { width: `${value}%` } })) : (React.createElement("div", { className: "indeterminate" }))));
};
export default LinearProgressbar;