@yamada-ui/loading
Version:
Yamada UI loading components
110 lines (108 loc) • 3.28 kB
JavaScript
"use client"
// src/rings.tsx
import { forwardRef } from "@yamada-ui/core";
import { Icon } from "@yamada-ui/icon";
import { jsx, jsxs } from "react/jsx-runtime";
var Rings = forwardRef(
({ color, duration = "3s", ...rest }, ref) => {
const dur = typeof duration === "string" ? parseFloat(duration) : duration;
return /* @__PURE__ */ jsx(Icon, { ref, stroke: color, viewBox: "0 0 45 45", ...rest, children: /* @__PURE__ */ jsxs(
"g",
{
fill: "none",
fillRule: "evenodd",
strokeWidth: "2",
transform: "translate(1 1)",
children: [
/* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0", children: [
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "r",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "6;22"
}
),
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "stroke-opacity",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "1;0"
}
),
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "stroke-width",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "2;0"
}
)
] }),
/* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0", children: [
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "r",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "6;22"
}
),
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "stroke-opacity",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "1;0"
}
),
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "stroke-width",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "2;0"
}
)
] }),
/* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "8", children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: `${dur / 2}s`,
repeatCount: "indefinite",
values: "6;1;2;3;4;5;6"
}
) })
]
}
) });
}
);
Rings.displayName = "Rings";
Rings.__ui__ = "Rings";
export {
Rings
};
//# sourceMappingURL=chunk-UNGG65VC.mjs.map