@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
85 lines (81 loc) • 2.08 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/grid.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 Grid = require_loading.withContext(({ dur = "1s",...rest }) => {
dur = (0, require_utils_index.utils_exports.isString)(dur) ? parseFloat(dur) : dur;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon.Icon, {
fill: "currentColor",
viewBox: "0 0 105 105",
...rest,
children: [
{
cx: "12.5px",
cy: "12.5px"
},
{
animationDelay: "0.1s",
cx: "12.5px",
cy: "52.5px"
},
{
animationDelay: "0.3s",
cx: "52.5px",
cy: "12.5px"
},
{
animationDelay: "0.6s",
cx: "52.5px",
cy: "52.5px"
},
{
animationDelay: "0.8s",
cx: "92.5px",
cy: "12.5px"
},
{
animationDelay: "0.4s",
cx: "92.5px",
cy: "52.5px"
},
{
animationDelay: "0.7s",
cx: "12.5px",
cy: "92.5px"
},
{
animationDelay: "0.5s",
cx: "52.5px",
cy: "92.5px"
},
{
animationDelay: "0.2s",
cx: "92.5px",
cy: "92.5px"
}
].map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.circle, {
...props,
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
r: "12.5px",
_keyframes: {
"0%, 100%": { fillOpacity: "1" },
"50%": { fillOpacity: "0.2" }
}
}, index))
});
})(require_loading.initialProps, require_loading.superProps);
//#endregion
exports.Grid = Grid;
//# sourceMappingURL=grid.cjs.map