@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
103 lines (99 loc) • 3.16 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_icon = require('../icon/icon.cjs');
const require_loading = require('./loading.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/loading/rings.tsx
/**
* `Loading` is a component displayed during waiting times, such as when data is being loaded.
*
* @see https://yamada-ui.com/docs/components/feedback/loading
*/
const Rings = require_loading.withContext(({ dur = "3s",...rest }) => {
dur = (0, require_utils_index.utils_exports.isString)(dur) ? parseFloat(dur) : dur;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon.Icon, {
stroke: "currentColor",
viewBox: "0 0 45 45",
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
fill: "none",
fillRule: "evenodd",
strokeWidth: "2",
transform: "translate(1 1)",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.circle, {
animationDelay: "1.5s",
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
cx: "22px",
cy: "22px",
r: "6px",
strokeOpacity: "0",
transformBox: "fill-box",
transformOrigin: "center",
_keyframes: {
"0%": {
strokeOpacity: "1",
strokeWidth: "2",
transform: "scale(1)"
},
"100%": {
strokeOpacity: "0",
strokeWidth: "0",
transform: "scale(calc(22 / 6))"
}
}
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.circle, {
animationDelay: "3s",
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
cx: "22px",
cy: "22px",
r: "6px",
strokeOpacity: "0",
transformBox: "fill-box",
transformOrigin: "center",
_keyframes: {
"0%": {
strokeOpacity: "1",
strokeWidth: "2",
transform: "scale(1)"
},
"100%": {
strokeOpacity: "0",
strokeWidth: "0",
transform: "scale(calc(22 / 6))"
}
}
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.circle, {
animationDuration: `${dur / 2}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
cx: "22px",
cy: "22px",
r: "8px",
transformBox: "fill-box",
transformOrigin: "center",
_keyframes: {
"0%, 100%": { transform: "scale(calc(6 / 8))" },
"16.7%": { transform: "scale(calc(1 / 8))" },
"33.3%": { transform: "scale(calc(2 / 8))" },
"50%": { transform: "scale(calc(3 / 8))" },
"66.7%": { transform: "scale(calc(4 / 8))" },
"83.3%": { transform: "scale(calc(5 / 8))" }
}
})
]
})
});
})(require_loading.initialProps, require_loading.superProps);
//#endregion
exports.Rings = Rings;
//# sourceMappingURL=rings.cjs.map