vue3-spinners
Version:
Spinners for Vue 3.
2,047 lines (2,011 loc) • 101 kB
JavaScript
import { computed, defineComponent, h, toRef, createElementBlock, openBlock, normalizeStyle, Fragment, renderList, createElementVNode, useCssVars, unref } from 'vue';
import { outdent } from 'outdent';
import styleInject from 'style-inject';
import toHex from 'colornames';
import parseUnit from 'parse-unit';
import range from 'just-range';
const spinnerProps = {
size: {
type: [Number, String],
default: "1em"
},
color: String
};
let isStyleInjected = false;
function useSpinner(props) {
if (!isStyleInjected) {
const spinnerCSS = outdent`
.vue-spinner {
vertical-align: middle;
}
`;
styleInject(spinnerCSS);
isStyleInjected = true;
}
return {
cSize: computed(() => props.size),
classes: computed(() => "vue-spinner"),
style: computed(() => ({ color: props.color }))
};
}
const _sfc_main$k = defineComponent({
name: "VueSpinner",
props: {
...spinnerProps,
thickness: {
type: Number,
default: 5
}
},
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value + " vue-spinner-mat",
width: cSize.value,
height: cSize.value,
viewBox: "25 25 50 50"
},
[
h("circle", {
class: "path",
cx: "50",
cy: "50",
r: "20",
fill: "none",
stroke: "currentColor",
"stroke-width": props.thickness,
"stroke-miterlimit": "10"
})
]
);
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const vueSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner.vue"]]);
const svg$l = [
h(
"g",
{
transform: "matrix(1 0 0 -1 0 80)"
},
[
h(
"rect",
{
width: "10",
height: "20",
rx: "3"
},
[
h("animate", {
attributeName: "height",
begin: "0s",
dur: "4.3s",
values: "20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "15",
width: "10",
height: "80",
rx: "3"
},
[
h("animate", {
attributeName: "height",
begin: "0s",
dur: "2s",
values: "80;55;33;5;75;23;73;33;12;14;60;80",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "30",
width: "10",
height: "50",
rx: "3"
},
[
h("animate", {
attributeName: "height",
begin: "0s",
dur: "1.4s",
values: "50;34;78;23;56;23;34;76;80;54;21;50",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "45",
width: "10",
height: "30",
rx: "3"
},
[
h("animate", {
attributeName: "height",
begin: "0s",
dur: "2s",
values: "30;45;13;80;56;72;45;76;34;23;67;30",
calcMode: "linear",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerAudio = defineComponent({
name: "VueSpinnerAudio",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
fill: "currentColor",
width: cSize.value,
height: cSize.value,
viewBox: "0 0 55 80",
xmlns: "http://www.w3.org/2000/svg"
},
svg$l
);
}
});
const svg$k = [
h(
"g",
{
transform: "translate(1 1)",
"stroke-width": "2",
fill: "none",
"fill-rule": "evenodd"
},
[
h(
"circle",
{
cx: "5",
cy: "50",
r: "5"
},
[
h("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;5;50;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
values: "5;27;49;5",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "27",
cy: "5",
r: "5"
},
[
h("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
from: "5",
to: "5",
values: "5;50;50;5",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "cx",
begin: "0s",
dur: "2.2s",
from: "27",
to: "27",
values: "27;49;5;27",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "49",
cy: "50",
r: "5"
},
[
h("animate", {
attributeName: "cy",
begin: "0s",
dur: "2.2s",
values: "50;50;5;50",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "cx",
from: "49",
to: "49",
begin: "0s",
dur: "2.2s",
values: "49;5;27;49",
calcMode: "linear",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerBall = defineComponent({
name: "VueSpinnerBall",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
stroke: "currentColor",
width: cSize.value,
height: cSize.value,
viewBox: "0 0 57 57",
xmlns: "http://www.w3.org/2000/svg"
},
svg$k
);
}
});
function useSpinnerProps(props) {
const defaultProps = {
color: {
type: String,
default: "#000000"
}
};
const optionalProps = {
size: {
type: [String, Number],
default: props.size
},
margin: { type: String, default: props.margin },
height: { type: [String, Number], default: props.height },
width: { type: [String, Number], default: props.width },
radius: { type: [String, Number], default: props.radius }
};
const actualProps = { ...defaultProps };
for (const prop of Object.keys(props)) {
actualProps[prop] = optionalProps[prop];
}
return actualProps;
}
const calculateRgba = (input, opacity) => {
let color = "";
const colorNameHex = toHex(input);
if (colorNameHex !== void 0) {
color = colorNameHex.slice(1);
} else if (input.startsWith(`#`)) {
color = input.slice(1);
}
if (color.length === 3) {
let res = "";
for (const c of color) {
res += c;
res += c;
}
color = res;
}
const rgbParts = color.match(/.{2}/g);
if (rgbParts === null) {
throw new Error(`Could not identify RGB value of color \`${input}\``);
}
const rgbValues = rgbParts.map((hex) => Number.parseInt(hex, 16)).join(`, `);
return `rgba(${rgbValues}, ${opacity})`;
};
function useSize(sizeGetter) {
return computed(() => {
const sizeProp = sizeGetter();
let [value, unit] = parseUnit(String(sizeProp));
unit = unit === void 0 || unit === "" ? "px" : unit;
return {
value,
unit,
string: `${value}${unit}`
};
});
}
const __default__$i = { name: "VueSpinnerBar" };
const _sfc_main$j = /* @__PURE__ */ defineComponent({
...__default__$i,
props: useSpinnerProps({ height: 4, width: 100 }),
setup(__props, { expose: __expose }) {
__expose();
const heightProp = toRef(__props, "height");
const widthProp = toRef(__props, "width");
const width = useSize(() => __props.width);
const height = useSize(() => __props.height);
const wrapperStyle = computed(
() => ({
position: "relative",
width: width.value.string,
height: height.value.string,
overflow: "hidden",
backgroundColor: calculateRgba(__props.color, 0.2),
backgroundClip: "padding-box"
})
);
const getBarStyle = (version) => ({
position: "absolute",
height: height.value.string,
overflow: "hidden",
backgroundColor: __props.color,
backgroundClip: "padding-box",
display: "block",
borderRadius: "2px",
willChange: "left, right",
animationFillMode: "forwards",
animation: ` ${version === 1 ? "vue-spinner-long" : "vue-spinner-short"} 2.1s ${version === 2 ? `1.15s` : ``} ${version === 1 ? `cubic-bezier(0.65, 0.815, 0.735, 0.395)` : `cubic-bezier(0.165, 0.84, 0.44, 1)`} infinite`
});
const __returned__ = { heightProp, widthProp, width, height, wrapperStyle, getBarStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(), createElementBlock(
Fragment,
null,
renderList(2, (n) => {
return createElementVNode(
"div",
{
key: n,
style: normalizeStyle($setup.getBarStyle(n))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerBar = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-bar.vue"]]);
const svg$j = [
h(
"rect",
{
y: "10",
width: "15",
height: "120",
rx: "6"
},
[
h("animate", {
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "30",
y: "10",
width: "15",
height: "120",
rx: "6"
},
[
h("animate", {
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "60",
width: "15",
height: "140",
rx: "6"
},
[
h("animate", {
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "90",
y: "10",
width: "15",
height: "120",
rx: "6"
},
[
h("animate", {
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"rect",
{
x: "120",
y: "10",
width: "15",
height: "120",
rx: "6"
},
[
h("animate", {
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerBars = defineComponent({
name: "VueSpinnerBars",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
fill: "currentColor",
width: cSize.value,
height: cSize.value,
viewBox: "0 0 135 140",
xmlns: "http://www.w3.org/2000/svg"
},
svg$j
);
}
});
const _sfc_main$i = /* @__PURE__ */ defineComponent({
__name: "vue-spinner-beat",
props: useSpinnerProps({ size: 15, margin: "2px" }),
setup(__props, { expose: __expose }) {
__expose();
const marginProp = toRef(__props, "margin");
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const margin = useSize(() => __props.margin);
const getCircleStyle = (version) => ({
animation: `vue-spinner-beat 0.7s ${version % 2 ? `0s` : `0.35s`} infinite linear`,
display: "inline-block",
backgroundColor: __props.color,
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
animationFillMode: "both"
});
const __returned__ = { marginProp, sizeProp, size, margin, getCircleStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", null, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(3, (n) => {
return createElementVNode(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle(n))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
]);
}
const vueSpinnerBeat = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-beat.vue"]]);
const __default__$h = { name: "VueSpinnerBeat" };
const _sfc_main$h = /* @__PURE__ */ defineComponent({
...__default__$h,
props: useSpinnerProps({ size: 60 }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const getCircleStyle = (version) => ({
position: "absolute",
width: size.value.string,
height: size.value.string,
backgroundColor: __props.color,
borderRadius: "100%",
opacity: 0.6,
top: 0,
left: 0,
animationFillMode: "both",
animation: `vue-spinner-bounce 2.1s ${version === 1 ? `1s` : `0s`} infinite ease-in-out`
});
const wrapperStyle = computed(
() => ({
position: "relative",
width: size.value.string,
height: size.value.string
})
);
const __returned__ = { sizeProp, size, getCircleStyle, wrapperStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(), createElementBlock(
Fragment,
null,
renderList(2, (n) => {
return createElementVNode(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle(n))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerBounce = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-bounce.vue"]]);
const svg$i = [
h(
"rect",
{
x: "25",
y: "25",
width: "50",
height: "50",
fill: "none",
"stroke-width": "4",
stroke: "currentColor"
},
[
h("animateTransform", {
id: "spinnerBox",
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "180 50 50",
dur: "0.5s",
begin: "rectBox.end"
})
]
),
h(
"rect",
{
x: "27",
y: "27",
width: "46",
height: "50",
fill: "currentColor"
},
[
h("animate", {
id: "rectBox",
attributeName: "height",
begin: "0s;spinnerBox.end",
dur: "1.3s",
from: "50",
to: "0",
fill: "freeze"
})
]
)
];
const vueSpinnerBox = defineComponent({
name: "VueSpinnerBox",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
width: cSize.value,
height: cSize.value,
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
xmlns: "http://www.w3.org/2000/svg"
},
svg$i
);
}
});
const __default__$g = { name: "VueSpinnerCircle" };
const _sfc_main$g = /* @__PURE__ */ defineComponent({
...__default__$g,
props: useSpinnerProps({ size: 50 }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const getRingStyle = (version) => ({
position: "absolute",
border: `1px solid ${__props.color}`,
borderRadius: "100%",
transition: "2s",
borderBottom: "none",
borderRight: "none",
animationFillMode: "",
height: `${size.value.value * (1 - version / 10)}${size.value.unit}`,
width: `${size.value.value * (1 - version / 10)}${size.value.unit}`,
top: `${version * 0.7 * 2.5}%`,
left: `${version * 0.35 * 2.5}%`,
animation: `vue-spinner-circle 1s ${version * 0.2}s infinite linear`
});
const wrapperStyle = computed(
() => ({
position: "relative",
width: size.value.string,
height: size.value.string
})
);
const __returned__ = { sizeProp, size, getRingStyle, wrapperStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(), createElementBlock(
Fragment,
null,
renderList(5, (i) => {
return createElementVNode(
"div",
{
key: i,
style: normalizeStyle($setup.getRingStyle(i))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerCircle = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-circle.vue"]]);
const __default__$f = { name: "VueSpinnerClimbingBox" };
const _sfc_main$f = /* @__PURE__ */ defineComponent({
...__default__$f,
props: useSpinnerProps({ size: 15 }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const containerStyle = computed(
() => ({
position: "relative",
width: "7.1em",
height: "7.1em"
})
);
const wrapperStyle = computed(
() => ({
position: "absolute",
top: "50%",
left: "50%",
marginTop: "-2.7em",
marginLeft: "-2.7em",
width: "5.4em",
height: "5.4em",
fontSize: size.value.string
})
);
const boxStyle = computed(
() => ({
position: "absolute",
left: "0",
bottom: "-0.1em",
height: "1em",
width: "1em",
backgroundColor: "transparent",
borderRadius: "15%",
border: `0.25em solid ${__props.color}`,
transform: "translate(0, -1em) rotate(-45deg)",
animationFillMode: "both",
animation: "vue-spinner-climbing-box 2.5s infinite cubic-bezier(0.79, 0, 0.47, 0.97)"
})
);
const hillStyle = computed(
() => ({
position: "absolute",
width: "7.1em",
height: "7.1em",
top: "1.7em",
left: "1.7em",
borderLeft: `0.25em solid ${__props.color}`,
transform: "rotate(45deg)"
})
);
const __returned__ = { sizeProp, size, containerStyle, wrapperStyle, boxStyle, hillStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.containerStyle)
},
[
createElementVNode(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
createElementVNode(
"div",
{
style: normalizeStyle($setup.boxStyle)
},
null,
4
/* STYLE */
),
createElementVNode(
"div",
{
style: normalizeStyle($setup.hillStyle)
},
null,
4
/* STYLE */
)
],
4
/* STYLE */
)
],
4
/* STYLE */
);
}
const vueSpinnerClimbingBox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-climbing-box.vue"]]);
const __default__$e = { name: "VueSpinnerClip" };
const _sfc_main$e = /* @__PURE__ */ defineComponent({
...__default__$e,
props: useSpinnerProps({ size: 35 }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const ringStyle = computed(() => ({
background: "transparent !important",
width: size.value.string,
height: size.value.string,
borderRadius: "100%",
border: `2px solid ${__props.color}`,
borderBottomColor: "transparent",
display: "inline-block",
animation: "vue-spinner-clip 0.75s 0s infinite linear",
animationFillMode: "both"
}));
const __returned__ = { sizeProp, size, ringStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.ringStyle)
},
null,
4
/* STYLE */
);
}
const vueSpinnerClip = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-clip.vue"]]);
const svg$h = [
h("circle", {
cx: "50",
cy: "50",
r: "48",
fill: "none",
"stroke-width": "4",
"stroke-miterlimit": "10",
stroke: "currentColor"
}),
h(
"line",
{
"stroke-linecap": "round",
"stroke-width": "4",
"stroke-miterlimit": "10",
stroke: "currentColor",
x1: "50",
y1: "50",
x2: "85",
y2: "50.5"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "2s",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
"stroke-linecap": "round",
"stroke-width": "4",
"stroke-miterlimit": "10",
stroke: "currentColor",
x1: "50",
y1: "50",
x2: "49.5",
y2: "74"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "15s",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerClock = defineComponent({
name: "VueSpinnerClock",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
width: cSize.value,
height: cSize.value,
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
xmlns: "http://www.w3.org/2000/svg"
},
svg$h
);
}
});
const svg$g = [
h("rect", {
x: "0",
y: "0",
width: "100",
height: "100",
fill: "none"
}),
h("path", {
d: "M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z",
fill: "currentColor"
}),
h(
"circle",
{
cx: "30",
cy: "47",
r: "5",
fill: "#fff"
},
[
h("animate", {
attributeName: "opacity",
from: "0",
to: "1",
values: "0;1;1",
keyTimes: "0;0.2;1",
dur: "1s",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "50",
cy: "47",
r: "5",
fill: "#fff"
},
[
h("animate", {
attributeName: "opacity",
from: "0",
to: "1",
values: "0;0;1;1",
keyTimes: "0;0.2;0.4;1",
dur: "1s",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "70",
cy: "47",
r: "5",
fill: "#fff"
},
[
h("animate", {
attributeName: "opacity",
from: "0",
to: "1",
values: "0;0;1;1",
keyTimes: "0;0.4;0.6;1",
dur: "1s",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerComment = defineComponent({
name: "VueSpinnerComment",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
width: cSize.value,
height: cSize.value,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid"
},
svg$g
);
}
});
const svg$f = [
h("rect", {
x: "0",
y: "0",
width: "100",
height: "100",
fill: "none"
}),
h(
"g",
{
transform: "translate(25 25)"
},
[
h(
"rect",
{
x: "-20",
y: "-20",
width: "40",
height: "40",
fill: "currentColor",
opacity: "0.9"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "1.5",
to: "1",
repeatCount: "indefinite",
begin: "0s",
dur: "1s",
calcMode: "spline",
keySplines: "0.2 0.8 0.2 0.8",
keyTimes: "0;1"
})
]
)
]
),
h(
"g",
{
transform: "translate(75 25)"
},
[
h(
"rect",
{
x: "-20",
y: "-20",
width: "40",
height: "40",
fill: "currentColor",
opacity: "0.8"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "1.5",
to: "1",
repeatCount: "indefinite",
begin: "0.1s",
dur: "1s",
calcMode: "spline",
keySplines: "0.2 0.8 0.2 0.8",
keyTimes: "0;1"
})
]
)
]
),
h(
"g",
{
transform: "translate(25 75)"
},
[
h(
"rect",
{
x: "-20",
y: "-20",
width: "40",
height: "40",
fill: "currentColor",
opacity: "0.7"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "1.5",
to: "1",
repeatCount: "indefinite",
begin: "0.3s",
dur: "1s",
calcMode: "spline",
keySplines: "0.2 0.8 0.2 0.8",
keyTimes: "0;1"
})
]
)
]
),
h(
"g",
{
transform: "translate(75 75)"
},
[
h(
"rect",
{
x: "-20",
y: "-20",
width: "40",
height: "40",
fill: "currentColor",
opacity: "0.6"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "1.5",
to: "1",
repeatCount: "indefinite",
begin: "0.2s",
dur: "1s",
calcMode: "spline",
keySplines: "0.2 0.8 0.2 0.8",
keyTimes: "0;1"
})
]
)
]
)
];
const vueSpinnerCore = defineComponent({
name: "VueSpinnerCube",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
width: cSize.value,
height: cSize.value,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid"
},
svg$f
);
}
});
const __default__$d = { name: "VueSpinnerDot" };
const _sfc_main$d = /* @__PURE__ */ defineComponent({
...__default__$d,
props: useSpinnerProps({ size: 60 }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const getCircleStyle = (version) => ({
position: "absolute",
height: `${size.value.value / 2}${size.value.unit}`,
width: `${size.value.value / 2}${size.value.unit}`,
backgroundColor: __props.color,
borderRadius: "100%",
animationFillMode: "forwards",
top: version % 2 ? "0" : "auto",
bottom: version % 2 ? `auto` : `0`,
animation: `vue-spinner-bounce 2s ${version === 2 ? `-1s` : `0s`} infinite linear`
});
const wrapperStyle = computed(
() => ({
position: "relative",
width: size.value.string,
height: size.value.string,
animationFillMode: "forwards",
animation: "vue-spinner-rotate 2s 0s infinite linear"
})
);
const __returned__ = { sizeProp, size, getCircleStyle, wrapperStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(), createElementBlock(
Fragment,
null,
renderList(2, (n) => {
return createElementVNode(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle(n))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerDot = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-dot.vue"]]);
const svg$e = [
h(
"circle",
{
cx: "15",
cy: "15",
r: "15"
},
[
h("animate", {
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "60",
cy: "15",
r: "9",
"fill-opacity": ".3"
},
[
h("animate", {
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "fill-opacity",
from: ".5",
to: ".5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "105",
cy: "15",
r: "15"
},
[
h("animate", {
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerDots = defineComponent({
name: "VueSpinnerDots",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
fill: "currentColor",
width: cSize.value,
height: cSize.value,
viewBox: "0 0 120 30",
xmlns: "http://www.w3.org/2000/svg"
},
svg$e
);
}
});
const svg$d = [
h(
"g",
{
transform: "translate(20 50)"
},
[
h(
"rect",
{
x: "-10",
y: "-30",
width: "20",
height: "60",
fill: "currentColor",
opacity: "0.6"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "2",
to: "1",
begin: "0s",
repeatCount: "indefinite",
dur: "1s",
calcMode: "spline",
keySplines: "0.1 0.9 0.4 1",
keyTimes: "0;1",
values: "2;1"
})
]
)
]
),
h(
"g",
{
transform: "translate(50 50)"
},
[
h(
"rect",
{
x: "-10",
y: "-30",
width: "20",
height: "60",
fill: "currentColor",
opacity: "0.8"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "2",
to: "1",
begin: "0.1s",
repeatCount: "indefinite",
dur: "1s",
calcMode: "spline",
keySplines: "0.1 0.9 0.4 1",
keyTimes: "0;1",
values: "2;1"
})
]
)
]
),
h(
"g",
{
transform: "translate(80 50)"
},
[
h(
"rect",
{
x: "-10",
y: "-30",
width: "20",
height: "60",
fill: "currentColor",
opacity: "0.9"
},
[
h("animateTransform", {
attributeName: "transform",
type: "scale",
from: "2",
to: "1",
begin: "0.2s",
repeatCount: "indefinite",
dur: "1s",
calcMode: "spline",
keySplines: "0.1 0.9 0.4 1",
keyTimes: "0;1",
values: "2;1"
})
]
)
]
)
];
const vueSpinnerFacebook = defineComponent({
name: "VueSpinnerFacebook",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
width: cSize.value,
height: cSize.value,
viewBox: "0 0 100 100",
xmlns: "http://www.w3.org/2000/svg",
preserveAspectRatio: "xMidYMid"
},
svg$d
);
}
});
const __default__$c = { name: "VueSpinnerFade" };
const rad = 20;
const _sfc_main$c = /* @__PURE__ */ defineComponent({
...__default__$c,
props: useSpinnerProps({
color: "#000000",
height: "15px",
width: "5px",
margin: "2px",
radius: "2px"
}),
setup(__props, { expose: __expose }) {
__expose();
const radiusProp = toRef(__props, "radius");
const marginProp = toRef(__props, "margin");
const widthProp = toRef(__props, "width");
const heightProp = toRef(__props, "height");
const height = useSize(() => __props.height);
const width = useSize(() => __props.width);
const margin = useSize(() => __props.margin);
const radius = useSize(() => __props.radius);
const quarter = rad / 2 + rad / 5.5;
const wrapperStyle = {
top: `${rad}px`,
left: `${rad}px`,
width: `${rad * 3}px`,
height: `${rad * 3}px`,
position: "relative",
fontSize: 0
};
const styles = {
a: {
top: `${rad}px`,
left: 0
},
b: {
top: `${quarter}px`,
left: `${quarter}px`,
transform: "rotate(-45deg)"
},
c: {
top: 0,
left: `${rad}px`,
transform: "rotate(90deg)"
},
d: {
top: `${ -13.636363636363637}px`,
left: `${quarter}px`,
transform: "rotate(45deg)"
},
e: {
top: `${ -20}px`,
left: 0
},
f: {
top: `${ -13.636363636363637}px`,
left: `${ -13.636363636363637}px`,
transform: "rotate(-45deg)"
},
g: {
top: 0,
left: `${ -20}px`,
transform: "rotate(90deg)"
},
h: {
top: `${quarter}px`,
left: `${ -13.636363636363637}px`,
transform: "rotate(45deg)"
}
};
const getBarStyle = (variation, version) => ({
position: "absolute",
width: width.value.string,
height: height.value.string,
margin: margin.value.string,
backgroundColor: __props.color,
borderRadius: radius.value.string,
transition: "2s",
animationFillMode: "both",
animation: `vue-spinner-fade 1.2s ${version * 0.12}s infinite ease-in-out`,
...styles[variation]
});
const __returned__ = { rad, radiusProp, marginProp, widthProp, heightProp, height, width, margin, radius, quarter, wrapperStyle, styles, getBarStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", { style: $setup.wrapperStyle }, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(Object.keys($setup.styles), (letter, i) => {
return openBlock(), createElementBlock(
"div",
{
key: i,
style: normalizeStyle($setup.getBarStyle(letter, i))
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
]);
}
const vueSpinnerFade = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-fade.vue"]]);
const svg$c = [
h(
"g",
{
transform: "translate(-20,-20)"
},
[
h(
"path",
{
d: "M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z",
fill: "currentColor"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "90 50 50",
to: "0 50 50",
dur: "1s",
repeatCount: "indefinite"
})
]
)
]
),
h(
"g",
{
transform: "translate(20,20) rotate(15 50 50)"
},
[
h(
"path",
{
d: "M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z",
fill: "currentColor"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "90 50 50",
dur: "1s",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerGears = defineComponent({
name: "VueSpinnerGears",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
width: cSize.value,
height: cSize.value,
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
xmlns: "http://www.w3.org/2000/svg"
},
svg$c
);
}
});
const svg$b = [
h(
"circle",
{
cx: "12.5",
cy: "12.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "12.5",
cy: "52.5",
r: "12.5",
"fill-opacity": ".5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "100ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "52.5",
cy: "12.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "300ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "52.5",
cy: "52.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "600ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "92.5",
cy: "12.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "800ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "92.5",
cy: "52.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "400ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "12.5",
cy: "92.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "700ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "52.5",
cy: "92.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "500ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "92.5",
cy: "92.5",
r: "12.5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "200ms",
dur: "1s",
values: "1;.2;1",
calcMode: "linear",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerGrid = defineComponent({
name: "VueSpinnerGrid",
props: spinnerProps,
setup(props) {
const { cSize, classes, style } = useSpinner(props);
return () => h(
"svg",
{
style: style.value,
class: classes.value,
fill: "currentColor",
width: cSize.value,
height: cSize.value,
viewBox: "0 0 105 105",
xmlns: "http://www.w3.org/2000/svg"
},
svg$b
);
}
});
const __default__$b = { name: "VueSpinnerGridPop" };
const _sfc_main$b = /* @__PURE__ */ defineComponent({
...__default__$b,
props: useSpinnerProps({ size: 15, margin: "2px" }),
setup(__props, { expose: __expose }) {
__expose();
const marginProp = toRef(__props, "margin");
const sizeProp = toRef(__props, "size");
const random = (top) => Math.random() * top;
const size = useSize(() => __props.size);
const margin = useSize(() => __props.margin);
const wrapperWidth = computed(() => size.value.value * 3 + margin.value.value * 6);
const getCircleStyle = (rand) => ({
display: "inline-block",
backgroundColor: __props.color,
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
animationFillMode: "both",
animation: `vue-spinner-grid ${rand / 100 + 0.6}s ${rand / 100 - 0.2}s infinite ease`
});
const wrapperStyle = computed(() => ({
width: `${wrapperWidth.value}px`,
fontSize: 0
}));
const __returned__ = { marginProp, sizeProp, random, size, margin, wrapperWidth, getCircleStyle, wrapperStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(), createElementBlock(
Fragment,
null,
renderList(9, (n) => {
return createElementVNode(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle($setup.random(100)))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_F