Loader

import { MtLoader } from '@/components/feedback-indicator/mt-loader/mt-loader.vue';

<template>
  <mt-loader />
</template>

<template>
  <!-- Small loader -->
  <mt-loader size="24px" />
  
  <!-- Medium loader (default) -->
  <mt-loader size="50px" />
  
  <!-- Large loader -->
  <mt-loader size="100px" />
</template>

<template>
  <div style="position: relative; min-height: 400px;">
    <mt-loader v-if="isLoading" />
    <div v-else>
      <!-- Your content here -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isLoading = ref(true);

setTimeout(() => {
  isLoading.value = false;
}, 2000);
</script>

<template>
  <div class="loading-container">
    <mt-loader size="60px" />
  </div>
</template>

<style scoped>
.loading-container {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>