init

src/components/common/LoadingSpinner.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{ size?: 'sm' | 'md' | 'lg'; label?: string }>();
+</script>
+
+<template>
+  <div class="spinner" :class="`spinner--${size ?? 'md'}`" role="status">
+    <svg viewBox="0 0 24 24" fill="none" class="spinner__ring">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="56.5" stroke-dashoffset="14"/>
+    </svg>
+    <span class="sr-only">{{ label ?? 'Загрузка...' }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.spinner {
+  display: inline-flex;
+  color: var(--color-signal);
+
+  &__ring {
+    animation: spin 0.9s linear infinite;
+  }
+
+  &--sm svg { width: 16px; height: 16px; }
+  &--md svg { width: 24px; height: 24px; }
+  &--lg svg { width: 40px; height: 40px; }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>