Website Structure

Frontend-Learner/components/common/LoadingSpinner.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+defineProps<{
+  size?: 'sm' | 'md' | 'lg'
+  text?: string
+  fullPage?: boolean
+}>()
+</script>
+
+<template>
+  <div :class="['loading-container', { 'loading-fullpage': fullPage }]">
+    <div :class="['spinner', size || 'md']"/>
+    <span v-if="text" class="loading-text">{{ text }}</span>
+  </div>
+</template>
+
+<style scoped>
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+}
+
+.loading-fullpage {
+  position: fixed;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 9999;
+}
+
+.spinner {
+  border: 3px solid var(--neutral-200);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.spinner.sm {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.spinner.md {
+  width: 36px;
+  height: 36px;
+  border-width: 3px;
+}
+
+.spinner.lg {
+  width: 56px;
+  height: 56px;
+  border-width: 4px;
+}
+
+.loading-text {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>