@re-flex/ui/ProgressIndicator/ProgressbarBase.js

Re-Flex ui library

import SXBase from "@re-flex/styled/SX";
import { styled } from "@re-flex/styles";
const ProgressbarBase = styled(SXBase)(({ theme: { sizes, space, palette, transitions }, size = "md" }) => {
    size = typeof size === "string" ? sizes?.[size] * space - 4 || 1.25 : size;
    return {
        "--progressbar-color": palette.primary.main,
        "--progressbar-size": `${size}px`,
        "--progressbar-circular-duration": `${transitions.duration.complex * 3}ms`,
        "--progressbar-linear-duration": `${transitions.duration.complex * 4}ms`,
        "--progressbar-bgcolor": "transparent",
        "--progressbar-timing-function": "ease-in-out",
        "--progressbar-stroke-size": "calc(var(--progressbar-size) / 12)",
        "& > progress": {
            display: "none",
        },
    };
});
export default ProgressbarBase;