@yamada-ui/react/dist/esm/components/loading/grid.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { Icon } from "../icon/icon.js";
import { initialProps, superProps, withContext } from "./loading.js";
import { jsx } from "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 = withContext(({ dur = "1s",...rest }) => {
	dur = (0, utils_exports.isString)(dur) ? parseFloat(dur) : dur;
	return /* @__PURE__ */ jsx(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__ */ jsx(styled.circle, {
			...props,
			animationDuration: `${dur}s`,
			animationIterationCount: "infinite",
			animationTimingFunction: "linear",
			r: "12.5px",
			_keyframes: {
				"0%, 100%": { fillOpacity: "1" },
				"50%": { fillOpacity: "0.2" }
			}
		}, index))
	});
})(initialProps, superProps);

//#endregion
export { Grid };
//# sourceMappingURL=grid.js.map