hippofish/packages/client/src/components/global/MkLoading.vue

<template>
	<div
		:class="[
			$style.root,
			{
				[$style.inline]: inline,
				[$style.colored]: colored,
				[$style.mini]: mini,
			},
		]"
	>
		<div :class="$style.container" aria-hidden="true">
			<svg
				:class="[$style.spinner]"
				viewBox="0 0 50 50"
				xmlns="http://www.w3.org/2000/svg"
			>
				<circle
					:class="[$style.path]"
					cx="25"
					cy="25"
					r="20"
					fill="none"
					stroke-width="6px"
					style="fill: none; stroke: currentColor; stroke-width: 6px"
				></circle>
			</svg>
		</div>
	</div>
</template>

<script lang="ts" setup>
const props = withDefaults(
	defineProps<{
		inline?: boolean;
		colored?: boolean;
		mini?: boolean;
		em?: boolean;
	}>(),
	{
		inline: false,
		colored: true,
		mini: false,
		em: false,
	},
);
</script>

<style lang="scss" module>
/* Credit to https://codepen.io/supah/pen/BjYLdW */

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

.root {
	padding: 32px;
	text-align: center;
	cursor: wait;

	--size: 40px;

	&.colored {
		color: var(--accent);
	}

	&.inline {
		display: inline;
		padding: 0;
		--size: 32px;
	}

	&.mini {
		padding: 16px;
		--size: 32px;
	}
	&.em {
		display: inline-block;
		vertical-align: middle;
		padding: 0;
		--size: 1em;
	}
}

.container {
	position: relative;
	width: var(--size);
	height: var(--size);
	margin: 0 auto;
}

.spinner {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	width: var(--size);
	height: var(--size);
	animation: spin 2s linear infinite;
}

.path {
	stroke: var(--accent);
	stroke-linecap: round;
	animation: dash 1.2s ease-in-out infinite;
}
</style>