vue3-spinners-css
Version:
Spinners for Vue 3. with exports css
3,861 lines • 100 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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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", "C:\\workspace\\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_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerGridPop = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-grid-pop.vue"]]);
const svg$a = [
h(
"path",
{
d: "M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z",
"fill-opacity": ".5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "0s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"path",
{
d: "M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z",
"fill-opacity": ".5"
},
[
h("animate", {
attributeName: "fill-opacity",
begin: "0.7s",
dur: "1.4s",
values: "0.5;1;0.5",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h("path", {
d: "M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"
})
];
const vueSpinnerHearts = defineComponent({
name: "VueSpinnerHearts",
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 140 64",
xmlns: "http://www.w3.org/2000/svg"
},
svg$a
);
}
});
const svg$9 = [
h("g", [
h("path", {
fill: "none",
stroke: "currentColor",
"stroke-width": "5",
"stroke-miterlimit": "10",
d: "M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z"
}),
h(
"clipPath",
{
id: "uil-hourglass-clip1"
},
[
h(
"rect",
{
x: "15",
y: "20",
width: "70",
height: "25"
},
[
h("animate", {
attributeName: "height",
from: "25",
to: "0",
dur: "1s",
repeatCount: "indefinite",
values: "25;0;0",
keyTimes: "0;0.5;1"
}),
h("animate", {
attributeName: "y",
from: "20",
to: "45",
dur: "1s",
repeatCount: "indefinite",
values: "20;45;45",
keyTimes: "0;0.5;1"
})
]
)
]
),
h(
"clipPath",
{
id: "uil-hourglass-clip2"
},
[
h(
"rect",
{
x: "15",
y: "55",
width: "70",
height: "25"
},
[
h("animate", {
attributeName: "height",
from: "0",
to: "25",
dur: "1s",
repeatCount: "indefinite",
values: "0;25;25",
keyTimes: "0;0.5;1"
}),
h("animate", {
attributeName: "y",
from: "80",
to: "55",
dur: "1s",
repeatCount: "indefinite",
values: "80;55;55",
keyTimes: "0;0.5;1"
})
]
)
]
),
h("path", {
d: "M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z",
"clip-path": "url(../uil-hourglass-clip1)",
fill: "currentColor"
}),
h("path", {
d: "M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z",
"clip-path": "url(../uil-hourglass-clip2)",
fill: "currentColor"
}),
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "180 50 50",
repeatCount: "indefinite",
dur: "1s",
values: "0 50 50;0 50 50;180 50 50",
keyTimes: "0;0.7;1"
})
])
];
const vueSpinnerHourglass = defineComponent({
name: "VueSpinnerHourglass",
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$9
);
}
});
const svg$8 = [
h(
"path",
{
d: "M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z",
fill: "none",
stroke: "currentColor",
"stroke-width": "8",
"stroke-dasharray": "10.691205342610678 10.691205342610678",
"stroke-dashoffset": "0"
},
[
h("animate", {
attributeName: "stroke-dashoffset",
from: "0",
to: "21.382410685221355",
begin: "0",
dur: "2s",
repeatCount: "indefinite",
fill: "freeze"
})
]
)
];
const vueSpinnerInfinity = defineComponent({
name: "VueSpinnerInfinity",
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"
},
svg$8
);
}
});
const svg$7 = [
h(
"g",
{
"stroke-width": "4",
"stroke-linecap": "round"
},
[
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(180)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: "1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(210)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: "0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(240)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(270)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(300)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(330)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(0)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(30)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(60)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(90)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(120)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: ".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85",
repeatCount: "indefinite"
})
]
),
h(
"line",
{
y1: "17",
y2: "29",
transform: "translate(32,32) rotate(150)"
},
[
h("animate", {
attributeName: "stroke-opacity",
dur: "750ms",
values: "1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerIos = defineComponent({
name: "VueSpinnerIos",
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,
stroke: "currentColor",
fill: "currentColor",
viewBox: "0 0 64 64"
},
svg$7
);
}
});
const __default__$a = { name: "VueSpinnerMoon" };
const _sfc_main$a = /* @__PURE__ */ defineComponent({
...__default__$a,
props: useSpinnerProps({ size: 60 }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const moonSize = (size2) => size2 / 7;
const wrapperStyle = computed(
() => ({
position: "relative",
width: `${size.value.value + moonSize(size.value.value) * 2}${size.value.unit}`,
height: `${size.value.value + moonSize(size.value.value) * 2}${size.value.unit}`,
animation: "vue-spinner-moon 0.6s linear 0s infinite normal forwards running",
boxSizing: "content-box"
})
);
const moonStyle = computed(
() => ({
position: "absolute",
top: `${size.value.value / 2 - moonSize(size.value.value)}${size.value.unit}`,
backgroundColor: __props.color,
opacity: "0.8",
animation: "vue-spinner-moon 0.6s linear 0s infinite normal forwards running",
boxSizing: "content-box",
width: `${moonSize(size.value.value)}${size.value.unit}`,
height: `${moonSize(size.value.value)}${size.value.unit}`,
borderRadius: "100%"
})
);
const ringStyle = computed(
() => ({
borderWidth: `${moonSize(size.value.value)}${size.value.unit}`,
borderStyle: "solid",
borderColor: __props.color,
borderImage: "initial",
opacity: "0.1",
boxSizing: "content-box",
width: size.value.string,
height: size.value.string,
borderRadius: "100%"
})
);
const __returned__ = { sizeProp, size, moonSize, wrapperStyle, moonStyle, ringStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
createElementVNode(
"div",
{
style: normalizeStyle($setup.moonStyle)
},
null,
4
/* STYLE */
),
createElementVNode(
"div",
{
style: normalizeStyle($setup.ringStyle)
},
null,
4
/* STYLE */
)
],
4
/* STYLE */
);
}
const vueSpinnerMoon = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-moon.vue"]]);
const svg$6 = [
h("circle", {
cx: "50",
cy: "50",
r: "44",
fill: "none",
"stroke-width": "4",
"stroke-opacity": ".5",
stroke: "currentColor"
}),
h(
"circle",
{
cx: "8",
cy: "54",
r: "6",
fill: "currentColor",
"stroke-width": "3",
stroke: "currentColor"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 48",
to: "360 50 52",
dur: "2s",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerOrbit = defineComponent({
name: "VueSpinnerOrbit",
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$6
);
}
});
const svg$5 = [
h(
"g",
{
transform: "translate(1 1)",
"stroke-width": "2",
fill: "none",
"fill-rule": "evenodd"
},
[
h("circle", {
"stroke-opacity": ".5",
cx: "18",
cy: "18",
r: "18"
}),
h(
"path",
{
d: "M36 18c0-9.94-8.06-18-18-18"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerOval = defineComponent({
name: "VueSpinnerOval",
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 38 38",
xmlns: "http://www.w3.org/2000/svg"
},
svg$5
);
}
});
const __default__$9 = { name: "VueSpinnerPacman" };
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
...__default__$9,
props: useSpinnerProps({ size: "25px", margin: "2px" }),
setup(__props, { expose: __expose }) {
__expose();
useCssVars((_ctx) => ({
"c8cb0e22-`${-4 * size.value}${size.unit}`": `${ -4 * unref(size).value}${unref(size).unit}`,
"c8cb0e22-`${-size.value / 4}${size.unit}`": `${-unref(size).value / 4}${unref(size).unit}`
}));
const marginProp = toRef(__props, "margin");
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const margin = useSize(() => __props.margin);
const s1 = (sizeString) => `${sizeString} solid transparent`;
const s2 = (sizeString, color) => `${sizeString} solid ${color}`;
const getPacmanStyle = (version) => ({
position: "absolute",
width: 0,
height: 0,
borderTop: version === 0 ? s1(size.value.string) : s2(size.value.string, __props.color),
borderLeft: s2(size.value.string, __props.color),
borderBottom: version === 0 ? s2(size.value.string, __props.color) : s1(size.value.string),
borderRight: s1(size.value.string),
borderRadius: size.value.string,
animation: `vue-spinner-pacman${version} ease-in-out 0.8s infinite normal both running`
});
const getBallStyle = (version) => ({
position: "absolute",
top: size.value.string,
left: `${size.value.value * 4}${size.value.unit}`,
width: `${size.value.value / 2.5}${size.value.unit}`,
height: `${size.value.value / 2.5}${size.value.unit}`,
margin: margin.value.string,
borderRadius: "100%",
backgroundColor: __props.color,
transform: `translate(0, ${-size.value.value / 4}${size.value.unit})`,
animation: `vue-spinner-pacman-ball-animation 1s linear ${version * 0.25}s infinite normal both running`
});
const wrapperStyle = computed(
() => ({
position: "relative",
width: size.value.string,
height: size.value.string,
fontSize: 0
})
);
const __returned__ = { marginProp, sizeProp, size, margin, s1, s2, getPacmanStyle, getBallStyle, wrapperStyle, get range() {
return range;
} };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
createElementVNode(
"div",
{
style: normalizeStyle($setup.getPacmanStyle(0))
},
null,
4
/* STYLE */
),
createElementVNode(
"div",
{
style: normalizeStyle($setup.getPacmanStyle(1))
},
null,
4
/* STYLE */
),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList($setup.range(2, 7), (n) => {
return openBlock(), createElementBlock(
"div",
{
key: n,
style: normalizeStyle($setup.getBallStyle(n))
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerPacman = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-pacman.vue"]]);
const svg$4 = [
h(
"path",
{
d: "M0 50A50 50 0 0 1 50 0L50 50L0 50",
fill: "currentColor",
opacity: "0.5"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "0.8s",
repeatCount: "indefinite"
})
]
),
h(
"path",
{
d: "M50 0A50 50 0 0 1 100 50L50 50L50 0",
fill: "currentColor",
opacity: "0.5"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "1.6s",
repeatCount: "indefinite"
})
]
),
h(
"path",
{
d: "M100 50A50 50 0 0 1 50 100L50 50L100 50",
fill: "currentColor",
opacity: "0.5"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "2.4s",
repeatCount: "indefinite"
})
]
),
h(
"path",
{
d: "M50 100A50 50 0 0 1 0 50L50 50L50 100",
fill: "currentColor",
opacity: "0.5"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "3.2s",
repeatCount: "indefinite"
})
]
)
];
const vueSpinnerPie = defineComponent({
name: "VueSpinnerPie",
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$4
);
}
});
const __default__$8 = { name: "VueSpinnerPropagate" };
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
...__default__$8,
props: useSpinnerProps({
size: "15px"
}),
setup(__props, { expose: __expose }) {
__expose();
useCssVars((_ctx) => ({
'5639d928-getDistance(0, "left")': getDistance(0, "left"),
'5639d928-getDistance(1, "left")': getDistance(1, "left"),
'5639d928-getDistance(2, "left")': getDistance(2, "left"),
'5639d928-getDistance(0, "right")': getDistance(0, "right"),
'5639d928-getDistance(1, "right")': getDistance(1, "right"),
'5639d928-getDistance(2, "right")': getDistance(2, "right")
}));
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const distance = [1, 3, 5];
const getCircleStyle = (version) => ({
position: "absolute",
width: size.value.string,
height: size.value.string,
borderRadius: "50%",
background: __props.color,
fontSize: `${size.value.value / 3}${size.value.unit}`,
animationFillMode: "forwards",
animation: `vue-spinner-propagate${version} 1.5s infinite`
});
const getDistance = (index, direction) => `${distance[index] * (direction === "left" ? -1 : 1)}rem`;
const wrapperStyle = computed(
() => ({
position: "relative"
})
);
const __returned__ = { sizeProp, size, distance, getCircleStyle, getDistance, wrapperStyle, get range() {
return range;
} };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(true), createElementBlock(
Fragment,
null,
renderList($setup.range(0, 6), (n) => {
return openBlock(), createElementBlock(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle(n))
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerPropagate = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-propagate.vue"]]);
const svg$3 = [
h(
"g",
{
fill: "none",
"fill-rule": "evenodd",
"stroke-width": "2"
},
[
h(
"circle",
{
cx: "22",
cy: "22",
r: "1"
},
[
h("animate", {
attributeName: "r",
begin: "0s",
dur: "1.8s",
values: "1; 20",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.165, 0.84, 0.44, 1",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "stroke-opacity",
begin: "0s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "22",
cy: "22",
r: "1"
},
[
h("animate", {
attributeName: "r",
begin: "-0.9s",
dur: "1.8s",
values: "1; 20",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.165, 0.84, 0.44, 1",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "stroke-opacity",
begin: "-0.9s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerPuff = defineComponent({
name: "VueSpinnerPuff",
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 44 44",
xmlns: "http://www.w3.org/2000/svg"
},
svg$3
);
}
});
const __default__$7 = { name: "VueSpinnerPulse" };
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
...__default__$7,
props: useSpinnerProps({ size: "15px", 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) => ({
display: "inline-block",
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
backgroundColor: __props.color,
animationFillMode: "both",
animation: `vue-spinner-pulse 0.75s ${version * 0.12}s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)`
});
const __returned__ = { marginProp, sizeProp, size, margin, getCircleStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", null, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(3, (n) => {
return createElementVNode(
"div",
{
key: n,
class: "circle",
style: normalizeStyle($setup.getCircleStyle(n + 1))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
]);
}
const vueSpinnerPulse = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-pulse.vue"]]);
const svg$2 = [
h(
"g",
{
transform: "scale(0.55)"
},
[
h(
"circle",
{
cx: "30",
cy: "150",
r: "30",
fill: "currentColor"
},
[
h("animate", {
attributeName: "opacity",
from: "0",
to: "1",
dur: "1s",
begin: "0",
repeatCount: "indefinite",
keyTimes: "0;0.5;1",
values: "0;1;1"
})
]
),
h(
"path",
{
d: "M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z",
fill: "currentColor"
},
[
h("animate", {
attributeName: "opacity",
from: "0",
to: "1",
dur: "1s",
begin: "0.1",
repeatCount: "indefinite",
keyTimes: "0;0.5;1",
values: "0;1;1"
})
]
),
h(
"path",
{
d: "M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z",
fill: "currentColor"
},
[
h("animate", {
attributeName: "opacity",
from: "0",
to: "1",
dur: "1s",
begin: "0.2",
repeatCount: "indefinite",
keyTimes: "0;0.5;1",
values: "0;1;1"
})
]
)
]
)
];
const vueSpinnerRadio = defineComponent({
name: "VueSpinnerRadio",
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$2
);
}
});
const __default__$6 = { name: "VueSpinnerRing" };
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
...__default__$6,
props: useSpinnerProps({ size: "60px" }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const getRingStyle = (version) => ({
position: "absolute",
top: "0",
left: "0",
width: size.value.string,
height: size.value.string,
border: `${size.value.value / 10}${size.value.unit} solid ${__props.color}`,
borderRadius: "100%",
opacity: "0.4",
animationFillMode: "forwards",
perspective: "800px",
animation: `${version === 1 ? "vue-spinner-right" : "vue-spinner-left"} 2s 0s 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$6(_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.getRingStyle(n))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerRing = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-ring.vue"]]);
const svg$1 = [
h(
"g",
{
fill: "none",
"fill-rule": "evenodd",
transform: "translate(1 1)",
"stroke-width": "2"
},
[
h(
"circle",
{
cx: "22",
cy: "22",
r: "6"
},
[
h("animate", {
attributeName: "r",
begin: "1.5s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "stroke-opacity",
begin: "1.5s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "stroke-width",
begin: "1.5s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "22",
cy: "22",
r: "6"
},
[
h("animate", {
attributeName: "r",
begin: "3s",
dur: "3s",
values: "6;22",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "stroke-opacity",
begin: "3s",
dur: "3s",
values: "1;0",
calcMode: "linear",
repeatCount: "indefinite"
}),
h("animate", {
attributeName: "stroke-width",
begin: "3s",
dur: "3s",
values: "2;0",
calcMode: "linear",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
cx: "22",
cy: "22",
r: "8"
},
[
h("animate", {
attributeName: "r",
begin: "0s",
dur: "1.5s",
values: "6;1;2;3;4;5;6",
calcMode: "linear",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerRings = defineComponent({
name: "VueSpinnerRings",
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 45 45",
xmlns: "http://www.w3.org/2000/svg"
},
svg$1
);
}
});
const __default__$5 = { name: "VueSpinnerRise" };
const riseAmount = 30;
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
...__default__$5,
props: useSpinnerProps({ size: "15px", margin: "2px" }),
setup(__props, { expose: __expose }) {
__expose();
useCssVars((_ctx) => ({
'53d645d0--riseAmount + "px"': -30 + "px",
'53d645d0-riseAmount + "px"': riseAmount + "px"
}));
const marginProp = toRef(__props, "margin");
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const margin = useSize(() => __props.margin);
const getCircleStyle = (version) => ({
display: "inline-block",
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
backgroundColor: __props.color,
animationFillMode: "both",
animation: `${version % 2 === 0 ? "vue-spinner-even" : "vue-spinner-odd"} 1s 0s infinite cubic-bezier(0.15, 0.46, 0.9, 0.6)`
});
const __returned__ = { riseAmount, marginProp, sizeProp, size, margin, getCircleStyle, get range() {
return range;
} };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", null, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList($setup.range(1, 6), (n) => {
return openBlock(), createElementBlock(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle(n))
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
]);
}
const vueSpinnerRise = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-rise.vue"]]);
const __default__$4 = { name: "VueSpinnerRotate" };
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
...__default__$4,
props: useSpinnerProps({ size: "15px", 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 wrapperStyle = computed(
() => ({
position: "relative",
display: "inline-block",
animation: "vue-spinner-rotate 1s 0s infinite cubic-bezier(0.7, -0.13, 0.22, 0.86)",
animationFillMode: "both",
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
backgroundColor: __props.color
})
);
const getCircleStyle = (side) => ({
position: "absolute",
top: "0",
opacity: "0.8",
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
backgroundColor: __props.color,
left: `${side === 1 ? -28 : 25}px`
});
const __returned__ = { marginProp, sizeProp, size, margin, wrapperStyle, getCircleStyle, get range() {
return range;
} };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.wrapperStyle)
},
[
(openBlock(true), createElementBlock(
Fragment,
null,
renderList($setup.range(0, 2), (n) => {
return openBlock(), createElementBlock(
"div",
{
key: n,
style: normalizeStyle($setup.getCircleStyle(n))
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
],
4
/* STYLE */
);
}
const vueSpinnerRotate = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-88e38763"], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-rotate.vue"]]);
const __default__$3 = { name: "VueSpinnerScale" };
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
...__default__$3,
props: useSpinnerProps({
height: "35px",
width: "4px",
radius: "2px",
margin: "2px"
}),
setup(__props, { expose: __expose }) {
__expose();
const marginProp = toRef(__props, "margin");
const radiusProp = toRef(__props, "radius");
const widthProp = toRef(__props, "width");
const heightProp = toRef(__props, "height");
const width = useSize(() => __props.width);
const height = useSize(() => __props.height);
const radius = useSize(() => __props.radius);
const margin = useSize(() => __props.margin);
const getBarStyle = (version) => ({
display: "inline-block",
width: width.value.string,
height: height.value.string,
margin: margin.value.string,
borderRadius: radius.value.string,
backgroundColor: __props.color,
animation: `vue-spinner-scale 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) ${version * 0.1}s infinite normal both running`
});
const __returned__ = { marginProp, radiusProp, widthProp, heightProp, width, height, radius, margin, getBarStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", null, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(5, (n) => {
return createElementVNode(
"div",
{
key: n,
style: normalizeStyle($setup.getBarStyle(n + 1))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
]);
}
const vueSpinnerScale = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-scale.vue"]]);
const __default__$2 = { name: "VueSpinnerSkew" };
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
...__default__$2,
props: useSpinnerProps({ size: "20px" }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const triangleStyle = computed(() => ({
display: "inline-block",
width: 0,
height: 0,
borderLeft: `${size.value.string} solid transparent`,
borderRight: `${size.value.string} solid transparent`,
borderBottom: `${size.value.string} solid ${__props.color}`,
animation: `vue-spinner-skew 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9)`,
animationFillMode: "both"
}));
const __returned__ = { sizeProp, size, triangleStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.triangleStyle)
},
null,
4
/* STYLE */
);
}
const vueSpinnerSkew = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-skew.vue"]]);
const __default__$1 = { name: "VueSpinnerSquare" };
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
...__default__$1,
props: useSpinnerProps({ size: "50px" }),
setup(__props, { expose: __expose }) {
__expose();
const sizeProp = toRef(__props, "size");
const size = useSize(() => __props.size);
const squareStyle = computed(() => ({
display: "inline-block",
width: size.value.string,
height: size.value.string,
backgroundColor: __props.color,
animation: "vue-spinner-square 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9)",
animationFillMode: "both"
}));
const __returned__ = { sizeProp, size, squareStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock(
"div",
{
style: normalizeStyle($setup.squareStyle)
},
null,
4
/* STYLE */
);
}
const vueSpinnerSquare = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-square.vue"]]);
const __default__ = { name: "VueSpinnerBounce" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: useSpinnerProps({ size: "15px", 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) => ({
display: "inline-block",
width: size.value.string,
height: size.value.string,
margin: margin.value.string,
borderRadius: "100%",
backgroundColor: __props.color,
boxSizing: "content-box",
animation: `vue-spinner-sync 0.6s ease-in-out ${version * 0.07}s infinite normal both running`
});
const __returned__ = { marginProp, sizeProp, size, margin, getCircleStyle };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", null, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(3, (n) => {
return createElementVNode(
"div",
{
key: n,
class: "circle",
style: normalizeStyle($setup.getCircleStyle(n + 1))
},
null,
4
/* STYLE */
);
}),
64
/* STABLE_FRAGMENT */
))
]);
}
const vueSpinnerSync = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "C:\\workspace\\vue3-spinners\\packages\\vue3-spinners\\src\\spinners\\vue-spinner-sync.vue"]]);
const svg = [
h("defs", [
h(
"linearGradient",
{
x1: "8.042%",
y1: "0%",
x2: "65.682%",
y2: "23.865%",
id: "a"
},
[
h("stop", {
"stop-color": "currentColor",
"stop-opacity": "0",
offset: "0%"
}),
h("stop", {
"stop-color": "currentColor",
"stop-opacity": ".631",
offset: "63.146%"
}),
h("stop", {
"stop-color": "currentColor",
offset: "100%"
})
]
)
]),
h(
"g",
{
transform: "translate(1 1)",
fill: "none",
"fill-rule": "evenodd"
},
[
h(
"path",
{
d: "M36 18c0-9.94-8.06-18-18-18",
stroke: "url(#a)",
"stroke-width": "2"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})
]
),
h(
"circle",
{
fill: "currentColor",
cx: "36",
cy: "18",
r: "1"
},
[
h("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})
]
)
]
)
];
const vueSpinnerTail = defineComponent({
name: "VueSpinnerTail",
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 38 38",
xmlns: "http://www.w3.org/2000/svg"
},
svg
);
}
});
const spinnerComponents = {
__proto__: null,
VueSpinner: vueSpinner,
VueSpinnerAudio: vueSpinnerAudio,
VueSpinnerBall: vueSpinnerBall,
VueSpinnerBar: vueSpinnerBar,
VueSpinnerBars: vueSpinnerBars,
VueSpinnerBeat: vueSpinnerBeat,
VueSpinnerBounce: vueSpinnerBounce,
VueSpinnerBox: vueSpinnerBox,
VueSpinnerCircle: vueSpinnerCircle,
VueSpinnerClimbingBox: vueSpinnerClimbingBox,
VueSpinnerClip: vueSpinnerClip,
VueSpinnerClock: vueSpinnerClock,
VueSpinnerComment: vueSpinnerComment,
VueSpinnerCore: vueSpinnerCore,
VueSpinnerDot: vueSpinnerDot,
VueSpinnerDots: vueSpinnerDots,
VueSpinnerFacebook: vueSpinnerFacebook,
VueSpinnerFade: vueSpinnerFade,
VueSpinnerGears: vueSpinnerGears,
VueSpinnerGrid: vueSpinnerGrid,
VueSpinnerGridPop: vueSpinnerGridPop,
VueSpinnerHearts: vueSpinnerHearts,
VueSpinnerHourglass: vueSpinnerHourglass,
VueSpinnerInfinity: vueSpinnerInfinity,
VueSpinnerIos: vueSpinnerIos,
VueSpinnerMoon: vueSpinnerMoon,
VueSpinnerOrbit: vueSpinnerOrbit,
VueSpinnerOval: vueSpinnerOval,
VueSpinnerPacman: vueSpinnerPacman,
VueSpinnerPie: vueSpinnerPie,
VueSpinnerPropagate: vueSpinnerPropagate,
VueSpinnerPuff: vueSpinnerPuff,
VueSpinnerPulse: vueSpinnerPulse,
VueSpinnerRadio: vueSpinnerRadio,
VueSpinnerRing: vueSpinnerRing,
VueSpinnerRings: vueSpinnerRings,
VueSpinnerRise: vueSpinnerRise,
VueSpinnerRotate: vueSpinnerRotate,
VueSpinnerScale: vueSpinnerScale,
VueSpinnerSkew: vueSpinnerSkew,
VueSpinnerSquare: vueSpinnerSquare,
VueSpinnerSync: vueSpinnerSync,
VueSpinnerTail: vueSpinnerTail
};
const VueSpinnersPlugin = {
install(app) {
for (const SpinnerComponent of Object.values(spinnerComponents)) {
app.component(SpinnerComponent.name, SpinnerComponent);
}
}
};
export { vueSpinner as VueSpinner, vueSpinnerAudio as VueSpinnerAudio, vueSpinnerBall as VueSpinnerBall, vueSpinnerBar as VueSpinnerBar, vueSpinnerBars as VueSpinnerBars, vueSpinnerBeat as VueSpinnerBeat, vueSpinnerBounce as VueSpinnerBounce, vueSpinnerBox as VueSpinnerBox, vueSpinnerCircle as VueSpinnerCircle, vueSpinnerClimbingBox as VueSpinnerClimbingBox, vueSpinnerClip as VueSpinnerClip, vueSpinnerClock as VueSpinnerClock, vueSpinnerComment as VueSpinnerComment, vueSpinnerCore as VueSpinnerCore, vueSpinnerDot as VueSpinnerDot, vueSpinnerDots as VueSpinnerDots, vueSpinnerFacebook as VueSpinnerFacebook, vueSpinnerFade as VueSpinnerFade, vueSpinnerGears as VueSpinnerGears, vueSpinnerGrid as VueSpinnerGrid, vueSpinnerGridPop as VueSpinnerGridPop, vueSpinnerHearts as VueSpinnerHearts, vueSpinnerHourglass as VueSpinnerHourglass, vueSpinnerInfinity as VueSpinnerInfinity, vueSpinnerIos as VueSpinnerIos, vueSpinnerMoon as VueSpinnerMoon, vueSpinnerOrbit as VueSpinnerOrbit, vueSpinnerOval as VueSpinnerOval, vueSpinnerPacman as VueSpinnerPacman, vueSpinnerPie as VueSpinnerPie, vueSpinnerPropagate as VueSpinnerPropagate, vueSpinnerPuff as VueSpinnerPuff, vueSpinnerPulse as VueSpinnerPulse, vueSpinnerRadio as VueSpinnerRadio, vueSpinnerRing as VueSpinnerRing, vueSpinnerRings as VueSpinnerRings, vueSpinnerRise as VueSpinnerRise, vueSpinnerRotate as VueSpinnerRotate, vueSpinnerScale as VueSpinnerScale, vueSpinnerSkew as VueSpinnerSkew, vueSpinnerSquare as VueSpinnerSquare, vueSpinnerSync as VueSpinnerSync, vueSpinnerTail as VueSpinnerTail, VueSpinnersPlugin };