@yamada-ui/loading
Version:
Yamada UI loading components
743 lines (734 loc) • 25 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/loading.tsx
var loading_exports = {};
__export(loading_exports, {
Loading: () => Loading
});
module.exports = __toCommonJS(loading_exports);
var import_core8 = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
// src/audio.tsx
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_jsx_runtime = require("react/jsx-runtime");
var Audio = (0, import_core.forwardRef)(
({ color, duration = "1.4s", ...rest }, ref) => {
const dur = typeof duration === "string" ? parseFloat(duration) : duration;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { ref, fill: color, viewBox: "0 0 55 80", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(1 0 0 -1 0 80)", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "20", rx: "3", width: "10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur * 3}s`,
repeatCount: "indefinite",
values: "20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "80", rx: "3", width: "10", x: "15", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur * 1.4}s`,
repeatCount: "indefinite",
values: "80;55;33;5;75;23;73;33;12;14;60;80"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "50", rx: "3", width: "10", x: "30", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "50;34;78;23;56;23;34;76;80;54;21;50"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { height: "30", rx: "3", width: "10", x: "45", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
calcMode: "linear",
dur: `${dur * 1.4}s`,
repeatCount: "indefinite",
values: "30;45;13;80;56;72;45;76;34;23;67;30"
}
) })
] }) });
}
);
Audio.displayName = "Audio";
Audio.__ui__ = "Audio";
// src/circles.tsx
var import_core2 = require("@yamada-ui/core");
var import_icon2 = require("@yamada-ui/icon");
var import_jsx_runtime2 = require("react/jsx-runtime");
var Circles = (0, import_core2.forwardRef)(
({ color, duration = "3s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon2.Icon, { ref, stroke: color, viewBox: "0 0 58 58", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { stroke: color, strokeWidth: "1.5", transform: "translate(2 1)", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "42.601",
cy: "11.462",
fill: color,
fillOpacity: "1",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;0;0;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "49.063",
cy: "27.063",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;1;0;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "42.601",
cy: "42.663",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;1;0;0;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.circle, { cx: "27", cy: "49.125", fill: color, fillOpacity: "0", r: "5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;1;0;0;0;0"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "11.399",
cy: "42.663",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;1;0;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "4.938",
cy: "27.063",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;1;0;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.circle,
{
cx: "11.399",
cy: "11.462",
fill: color,
fillOpacity: "0",
r: "5",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "0;0;0;0;0;0;1;0"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.circle, { cx: "27", cy: "5", fill: color, fillOpacity: "0", r: "5", children: /* @__PURE__ */ (0, import_jsx_runtime2.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";
// src/dots.tsx
var import_core3 = require("@yamada-ui/core");
var import_icon3 = require("@yamada-ui/icon");
var import_jsx_runtime3 = require("react/jsx-runtime");
var Dots = (0, import_core3.forwardRef)(
({ color, duration = "1s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon3.Icon, { ref, fill: color, viewBox: "0 0 120 30", ...rest, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "15",
repeatCount: "indefinite",
to: "15",
values: "15;9;15"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "1",
repeatCount: "indefinite",
to: "1",
values: "1;.5;1"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "60", cy: "15", fillOpacity: "0.3", r: "9", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "9",
repeatCount: "indefinite",
to: "9",
values: "9;15;9"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "0.5",
repeatCount: "indefinite",
to: "0.5",
values: ".5;1;.5"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "15",
repeatCount: "indefinite",
to: "15",
values: "15;9;15"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
from: "1",
repeatCount: "indefinite",
to: "1",
values: "1;.5;1"
}
)
] })
] });
}
);
Dots.displayName = "Dots";
Dots.__ui__ = "Dots";
// src/grid.tsx
var import_core4 = require("@yamada-ui/core");
var import_icon4 = require("@yamada-ui/icon");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Grid = (0, import_core4.forwardRef)(
({ color, duration = "1s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_icon4.Icon, { ref, fill: color, viewBox: "0 0 105 105", ...rest, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12.5", cy: "12.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "0s",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12.5", cy: "52.5", fillOpacity: ".5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "100ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "52.5", cy: "12.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "300ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "52.5", cy: "52.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "600ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "92.5", cy: "12.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "800ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "92.5", cy: "52.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "400ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12.5", cy: "92.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "700ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "52.5", cy: "92.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "500ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "92.5", cy: "92.5", r: "12.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "fill-opacity",
begin: "200ms",
calcMode: "linear",
dur: duration,
repeatCount: "indefinite",
values: "1;.2;1"
}
) })
] });
}
);
Grid.displayName = "Grid";
Grid.__ui__ = "Grid";
// src/oval.tsx
var import_core5 = require("@yamada-ui/core");
var import_icon5 = require("@yamada-ui/icon");
var import_jsx_runtime5 = require("react/jsx-runtime");
var Oval = (0, import_core5.forwardRef)(
({ color, duration = "1s", secondaryColor, ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icon5.Icon, { ref, stroke: color, viewBox: "0 0 38 38", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { strokeWidth: "2", transform: "translate(1 1)", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"circle",
{
...secondaryColor ? { stroke: secondaryColor } : { strokeOpacity: ".5" },
cx: "18",
cy: "18",
r: "18"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animateTransform",
{
type: "rotate",
attributeName: "transform",
dur: duration,
from: "0 18 18",
repeatCount: "indefinite",
to: "360 18 18"
}
) })
] }) }) });
}
);
Oval.displayName = "Oval";
Oval.__ui__ = "Oval";
// src/puff.tsx
var import_core6 = require("@yamada-ui/core");
var import_icon6 = require("@yamada-ui/icon");
var import_jsx_runtime6 = require("react/jsx-runtime");
var Puff = (0, import_core6.forwardRef)(
({ color, duration = "1.8s", ...rest }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icon6.Icon, { ref, stroke: color, viewBox: "0 0 44 44", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { fill: "none", fillRule: "evenodd", strokeWidth: "2", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "22", cy: "22", r: "1", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
begin: "0s",
calcMode: "spline",
dur: duration,
keySplines: "0.165, 0.84, 0.44, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 20"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "0s",
calcMode: "spline",
dur: duration,
keySplines: "0.3, 0.61, 0.355, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 0"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "22", cy: "22", r: "1", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
begin: "-0.9s",
calcMode: "spline",
dur: duration,
keySplines: "0.165, 0.84, 0.44, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 20"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "-0.9s",
calcMode: "spline",
dur: duration,
keySplines: "0.3, 0.61, 0.355, 1",
keyTimes: "0; 1",
repeatCount: "indefinite",
values: "1; 0"
}
)
] })
] }) });
}
);
Puff.displayName = "Puff";
Puff.__ui__ = "Puff";
// src/rings.tsx
var import_core7 = require("@yamada-ui/core");
var import_icon7 = require("@yamada-ui/icon");
var import_jsx_runtime7 = require("react/jsx-runtime");
var Rings = (0, import_core7.forwardRef)(
({ color, duration = "3s", ...rest }, ref) => {
const dur = typeof duration === "string" ? parseFloat(duration) : duration;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icon7.Icon, { ref, stroke: color, viewBox: "0 0 45 45", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"g",
{
fill: "none",
fillRule: "evenodd",
strokeWidth: "2",
transform: "translate(1 1)",
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "r",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "6;22"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "1;0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-width",
begin: "1.5s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "2;0"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "r",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "6;22"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-opacity",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "1;0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animate",
{
attributeName: "stroke-width",
begin: "3s",
calcMode: "linear",
dur: `${dur}s`,
repeatCount: "indefinite",
values: "2;0"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "22", cy: "22", r: "8", children: /* @__PURE__ */ (0, import_jsx_runtime7.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";
// src/loading.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Loading = (0, import_core8.forwardRef)((props, ref) => {
const [
{ color, ...styles },
{ colorScheme, size = "1em", variant = "oval", ...mergedProps }
] = (0, import_core8.useComponentStyle)("Loading", props);
const {
className,
color: colorProp,
dur,
duration,
secondaryColor,
...rest
} = (0, import_core8.omitThemeProps)(mergedProps);
const computedProps = (0, import_react.useMemo)(
() => {
var _a;
return {
className: (0, import_utils.cx)("ui-loading", className),
size,
color: "$color",
...secondaryColor ? { secondaryColor: "$secondary-color" } : {},
duration: duration != null ? duration : dur,
__css: {
...styles,
vars: (0, import_core8.mergeVars)(styles.vars, [
{
name: "color",
token: "colors",
value: (_a = colorProp != null ? colorProp : color) != null ? _a : `${colorScheme}.500`
},
{
name: "secondary-color",
token: "colors",
value: secondaryColor
}
])
},
...rest
};
},
[
className,
size,
secondaryColor,
duration,
dur,
styles,
colorProp,
color,
colorScheme,
rest
]
);
switch (variant) {
case "grid":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Grid, { ref, ...computedProps });
case "audio":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Audio, { ref, ...computedProps });
case "dots":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dots, { ref, ...computedProps });
case "puff":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Puff, { ref, ...computedProps });
case "rings":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Rings, { ref, ...computedProps });
case "circles":
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Circles, { ref, ...computedProps });
default:
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Oval, { ref, ...computedProps });
}
});
Loading.displayName = "Loading";
Loading.__ui__ = "Loading";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Loading
});
//# sourceMappingURL=loading.js.map