@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
90 lines (86 loc) • 2.19 kB
JavaScript
"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, jsxs } from "react/jsx-runtime";
//#region src/components/loading/dots.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 Dots = withContext(({ dur = "1s",...rest }) => {
dur = (0, utils_exports.isString)(dur) ? parseFloat(dur) : dur;
return /* @__PURE__ */ jsxs(Icon, {
fill: "currentColor",
viewBox: "0 0 120 30",
...rest,
children: [
/* @__PURE__ */ jsx(styled.circle, {
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
cx: "15px",
cy: "15px",
r: "15px",
transformBox: "fill-box",
transformOrigin: "center",
_keyframes: {
"0%, 100%": {
opacity: "1",
transform: "scale(1)"
},
"50%": {
opacity: "0.5",
transform: `scale(calc(9 / 15))`
}
}
}),
/* @__PURE__ */ jsx(styled.circle, {
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
cx: "60px",
cy: "15px",
fillOpacity: "1",
r: "9px",
transformBox: "fill-box",
transformOrigin: "center",
_keyframes: {
"0%, 100%": {
opacity: "0.5",
transform: "scale(1)"
},
"50%": {
opacity: "1",
transform: `scale(calc(15 / 9))`
}
}
}),
/* @__PURE__ */ jsx(styled.circle, {
animationDuration: `${dur}s`,
animationIterationCount: "infinite",
animationTimingFunction: "linear",
cx: "105px",
cy: "15px",
r: "15px",
transformBox: "fill-box",
transformOrigin: "center",
_keyframes: {
"0%, 100%": {
opacity: "1",
transform: "scale(1)"
},
"50%": {
opacity: "0.5",
transform: `scale(calc(9 / 15))`
}
}
})
]
});
})(initialProps, superProps);
//#endregion
export { Dots };
//# sourceMappingURL=dots.js.map