vue3-spinners-css/dist/index.css

Spinners for Vue 3. with exports css

.vue-spinner-mat {
	animation: vue-spinner-spin 2s linear infinite;
	transform-origin: center center;
}
.vue-spinner-mat .path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	animation: vue-spinner-mat-dash 1.5s ease-in-out infinite;
}
@keyframes vue-spinner-spin {
0% {
		transform: rotate3d(0, 0, 1, 0deg);
}
25% {
		transform: rotate3d(0, 0, 1, 90deg);
}
50% {
		transform: rotate3d(0, 0, 1, 180deg);
}
75% {
		transform: rotate3d(0, 0, 1, 270deg);
}
100% {
		transform: rotate3d(0, 0, 1, 359deg);
}
}
@keyframes vue-spinner-mat-dash {
0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
}
50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
}
100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
}
}


@keyframes vue-spinner-long {
0% {
		left: -35%;
		right: 100%;
}
60% {
		left: 100%;
		right: -90%;
}
100% {
		left: 100%;
		right: -90%;
}
}
@keyframes vue-spinner-short {
0% {
		left: -200%;
		right: 100%;
}
60% {
		left: 107%;
		right: -8%;
}
100% {
		left: 107%;
		right: -8%;
}
}


@keyframes vue-spinner-beat {
50% {
		transform: scale(0.75);
		opacity: 0.2;
}
100% {
		transform: scale(1);
		opacity: 1;
}
}


@keyframes vue-spinner-bounce {
0%,
	100% {
		transform: scale(0);
}
50% {
		transform: scale(1);
}
}


@keyframes vue-spinner-circle {
0% {
		transform: rotate(0deg);
}
50% {
		transform: rotate(180deg);
}
100% {
		transform: rotate(360deg);
}
}


@keyframes vue-spinner-climbing-box {
0% {
		transform: translate(0, -1em) rotate(-45deg);
}
5% {
		transform: translate(0, -1em) rotate(-50deg);
}
20% {
		transform: translate(1em, -2em) rotate(47deg);
}
25% {
		transform: translate(1em, -2em) rotate(45deg);
}
30% {
		transform: translate(1em, -2em) rotate(40deg);
}
45% {
		transform: translate(2em, -3em) rotate(137deg);
}
50% {
		transform: translate(2em, -3em) rotate(135deg);
}
55% {
		transform: translate(2em, -3em) rotate(130deg);
}
70% {
		transform: translate(3em, -4em) rotate(217deg);
}
75% {
		transform: translate(3em, -4em) rotate(220deg);
}
100% {
		transform: translate(0, -1em) rotate(-225deg);
}
}


@keyframes vue-spinner-clip {
0% {
		transform: rotate(0deg) scale(1);
}
50% {
		transform: rotate(180deg) scale(0.8);
}
100% {
		transform: rotate(360deg) scale(1);
}
}


@keyframes vue-spinner-rotate {
100% {
		transform: rotate(360deg);
}
}
@keyframes vue-spinner-bounce {
0%,
	100% {
		transform: scale(0);
}
50% {
		transform: scale(1);
}
}


@keyframes vue-spinner-fade {
50% {
		opacity: 0.3;
}
100% {
		opacity: 1;
}
}


@keyframes vue-spinner-grid {
0% {
		transform: scale(1);
}
50% {
		transform: scale(0.5);
		opacity: 0.7;
}
100% {
		transform: scale(1);
		opacity: 1;
}
}


@keyframes vue-spinner-moon {
100% {
		transform: rotate(360deg);
}
}


@keyframes vue-spinner-pacman0 {
0% {
		transform: rotate(0deg);
}
50% {
		transform: rotate(-44deg);
}
}
@keyframes vue-spinner-pacman1 {
0% {
		transform: rotate(0deg);
}
50% {
		transform: rotate(44deg);
}
}
@keyframes vue-spinner-pacman-ball-animation {
75% {
		opacity: 0.7;
}
100% {
		transform: translate(
			var(--c8cb0e22-\`\$\{-4\ \*\ size\.value\}\$\{size\.unit\}\`),
			var(--c8cb0e22-\`\$\{-size\.value\ \/\ 4\}\$\{size\.unit\}\`)
		);
}
}


@keyframes vue-spinner-propagate0 {
25% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"left\"\))) scale(0.75);
}
50% {
		transform: translateX(var(--5639d928-getDistance\(1\,\ \"left\"\))) scale(0.6);
}
75% {
		transform: translateX(var(--5639d928-getDistance\(2\,\ \"left\"\))) scale(0.5);
}
95% {
		transform: translateX(0rem) scale(1);
}
}
@keyframes vue-spinner-propagate1 {
25% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"left\"\))) scale(0.75);
}
50% {
		transform: translateX(var(--5639d928-getDistance\(1\,\ \"left\"\))) scale(0.6);
}
75% {
		transform: translateX(var(--5639d928-getDistance\(1\,\ \"left\"\))) scale(0.6);
}
95% {
		transform: translateX(0rem) scale(1);
}
}
@keyframes vue-spinner-propagate2 {
25% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"left\"\))) scale(0.75);
}
75% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"left\"\))) scale(0.75);
}
95% {
		transform: translateX(0rem) scale(1);
}
}
@keyframes vue-spinner-propagate3 {
25% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"right\"\))) scale(0.75);
}
75% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"right\"\))) scale(0.75);
}
95% {
		transform: translateX(0rem) scale(1);
}
}
@keyframes vue-spinner-propagate4 {
25% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"right\"\))) scale(0.75);
}
50% {
		transform: translateX(var(--5639d928-getDistance\(1\,\ \"right\"\))) scale(0.6);
}
75% {
		transform: translateX(var(--5639d928-getDistance\(1\,\ \"right\"\))) scale(0.6);
}
95% {
		transform: translateX(0rem) scale(1);
}
}
@keyframes vue-spinner-propagate5 {
25% {
		transform: translateX(var(--5639d928-getDistance\(0\,\ \"right\"\))) scale(0.75);
}
50% {
		transform: translateX(var(--5639d928-getDistance\(1\,\ \"right\"\))) scale(0.6);
}
75% {
		transform: translateX(var(--5639d928-getDistance\(2\,\ \"right\"\))) scale(0.5);
}
95% {
		transform: translateX(0rem) scale(1);
}
}


@keyframes vue-spinner-pulse {
0% {
		transform: scale(1);
		opacity: 1;
}
45% {
		transform: scale(0.1);
		opacity: 0.7;
}
80% {
		transform: scale(1);
		opacity: 1;
}
}


@keyframes vue-spinner-right {
0% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
		transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes vue-spinner-left {
0% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
		transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
}
}


@keyframes vue-spinner-even {
0% {
		transform: scale(1.1);
}
25% {
		transform: translateY(var(--53d645d0--riseAmount\ \+\ \"px\"));
}
50% {
		transform: scale(0.4);
}
75% {
		transform: translateY(var(--53d645d0-riseAmount\ \+\ \"px\"));
}
100% {
		transform: translateY(0) scale(1);
}
}
@keyframes vue-spinner-odd {
0% {
		transform: scale(0.4);
}
25% {
		transform: translateY(var(--53d645d0-riseAmount\ \+\ \"px\"));
}
50% {
		transform: scale(1.1);
}
75% {
		transform: translateY(var(--53d645d0--riseAmount\ \+\ \"px\"));
}
100% {
		transform: translateY(0) scale(0.75);
}
}


@keyframes vue-spinner-rotate-88e38763 {
0% {
		transform: rotate(0deg);
}
50% {
		transform: rotate(180deg);
}
100% {
		transform: rotate(360deg);
}
}


@keyframes vue-spinner-scale {
0% {
		transform: scaleY(1);
}
50% {
		transform: scaleY(0.4);
}
100% {
		transform: scaleY(1);
}
}


@keyframes vue-spinner-skew {
25% {
		transform: perspective(100px) rotateX(180deg) rotateY(0);
}
50% {
		transform: perspective(100px) rotateX(180deg) rotateY(180deg);
}
75% {
		transform: perspective(100px) rotateX(0) rotateY(180deg);
}
100% {
		transform: perspective(100px) rotateX(0) rotateY(0);
}
}


@keyframes vue-spinner-square {
25% {
		transform: rotateX(180deg) rotateY(0);
}
50% {
		transform: rotateX(180deg) rotateY(180deg);
}
75% {
		transform: rotateX(0) rotateY(180deg);
}
100% {
		transform: rotateX(0) rotateY(0);
}
}


@keyframes vue-spinner-sync {
33% {
		transform: translateY(10px);
}
66% {
		transform: translateY(-10px);
}
100% {
		transform: translateY(0);
}
}