xtreme-ui
Version:
Collection of reusable components that can be used in web projects
39 lines (38 loc) • 1.23 kB
JavaScript
"use client";
import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { forwardRef as o } from "react";
import t from "clsx";
/* empty css */
import { ESpinnerSize as u } from "./types.js";
const d = o((n, c) => {
const { className: l, label: p, size: s = "default", fullpage: r = !1 } = n, i = `${typeof s == "number" ? s : u[s]}px`, m = t(
"xtrSpinner",
r && "fullpage",
l
);
return /* @__PURE__ */ a(
"div",
{
ref: c,
className: m,
style: { "--spinnerSize": i },
role: "progressbar",
children: [
/* @__PURE__ */ a("div", { className: "spinnerWrapper", children: [
/* @__PURE__ */ e("div", { className: "cubeTop" }),
/* @__PURE__ */ a("div", { className: "cubeWrapper", children: [
/* @__PURE__ */ e("span", { className: "cubeFace" }),
/* @__PURE__ */ e("span", { className: "cubeFace" }),
/* @__PURE__ */ e("span", { className: "cubeFace" }),
/* @__PURE__ */ e("span", { className: "cubeFace" })
] })
] }),
r && /* @__PURE__ */ e("span", { className: "label", children: p })
]
}
);
});
d.displayName = "Spinner";
export {
d as Spinner
};