@yamada-ui/loading
Version:
Yamada UI loading components
167 lines (165 loc) • 4.49 kB
JavaScript
"use client"
// src/circles.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { Icon } from "@yamada-ui/icon";
import { jsx, jsxs } from "react/jsx-runtime";
var Circles = forwardRef(
({ color, duration = "3s", ...rest }, ref) => {
return /* @__PURE__ */ jsx(Icon, { ref, stroke: color, viewBox: "0 0 58 58", ...rest, children: /* @__PURE__ */ jsx("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { stroke: color, strokeWidth: "1.5", transform: "translate(2 1)", children: [
/* @__PURE__ */ jsx(
ui.circle,
{
cx: "42.601",
cy: "11.462",
fill: color,
fillOpacity: "1",
r: "5",
children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;0;0;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ jsx(
ui.circle,
{
cx: "49.063",
cy: "27.063",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;1;0;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ jsx(
ui.circle,
{
cx: "42.601",
cy: "42.663",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;1;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ jsx(ui.circle, { cx: "27", cy: "49.125", fill: color, fillOpacity: "0", r: "5", children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;1;0;0;0;0"
}
) }),
/* @__PURE__ */ jsx(
ui.circle,
{
cx: "11.399",
cy: "42.663",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;1;0;0;0"
}
)
}
),
/* @__PURE__ */ jsx(
ui.circle,
{
cx: "4.938",
cy: "27.063",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;1;0;0"
}
)
}
),
/* @__PURE__ */ jsx(
ui.circle,
{
cx: "11.399",
cy: "11.462",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;0;1;0"
}
)
}
),
/* @__PURE__ */ jsx(ui.circle, { cx: "27", cy: "5", fill: color, fillOpacity: "0", r: "5", children: /* @__PURE__ */ jsx(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;0;0;1"
}
) })
] }) }) });
}
);
Circles.displayName = "Circles";
Circles.__ui__ = "Circles";
export {
Circles
};
//# sourceMappingURL=chunk-WR5N6GYL.mjs.map