@chakra-ui/progress
Version:
Progress bar component for Chakra UI
75 lines (73 loc) • 1.54 kB
JavaScript
'use client'
// src/progress.utils.tsx
import { keyframes } from "@chakra-ui/system";
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
var spin = keyframes({
"0%": {
strokeDasharray: "1, 400",
strokeDashoffset: "0"
},
"50%": {
strokeDasharray: "400, 400",
strokeDashoffset: "-100"
},
"100%": {
strokeDasharray: "400, 400",
strokeDashoffset: "-260"
}
});
var rotate = keyframes({
"0%": {
transform: "rotate(0deg)"
},
"100%": {
transform: "rotate(360deg)"
}
});
var progress = keyframes({
"0%": { left: "-40%" },
"100%": { left: "100%" }
});
var stripe = keyframes({
from: { backgroundPosition: "1rem 0" },
to: { backgroundPosition: "0 0" }
});
function getProgressProps(options) {
const {
value = 0,
min,
max,
valueText,
getValueText,
isIndeterminate,
role = "progressbar"
} = options;
const percent = valueToPercent(value, min, max);
const getAriaValueText = () => {
if (value == null)
return void 0;
return typeof getValueText === "function" ? getValueText(value, percent) : valueText;
};
return {
bind: {
"data-indeterminate": isIndeterminate ? "" : void 0,
"aria-valuemax": max,
"aria-valuemin": min,
"aria-valuenow": isIndeterminate ? void 0 : value,
"aria-valuetext": getAriaValueText(),
role
},
percent,
value
};
}
export {
spin,
rotate,
progress,
stripe,
getProgressProps
};
//# sourceMappingURL=chunk-TXZFUZNG.mjs.map