tehran_taj/apps/user-app-v2/src/components/Spinner.vue

<!-- Ported from legacy henza_pwa/src/components/spinner.vue -->
<template>
  <Spin :spinning="spinning" :tip="tip" :size="(size as 'small' | 'default' | 'large')" :delay="delay" :class="fixed ? '!max-h-screen !fixed' : ''">
    <template #indicator>
      <img v-if="!indicator" src="/img/brand-logo.png" :alt="brand.nameEn" class="spinner-brand" width="48" height="48" />
      <!-- keep-motion: a working spinner, exempt from reduced motion. -->
      <div class="loading keep-motion" v-else>
        <div class="effect-1 effects"></div>
        <div class="effect-2 effects"></div>
        <div class="effect-3 effects"></div>
      </div>
    </template>
    <div :class="cls">
      <slot />
    </div>
  </Spin>
</template>

<script setup lang="ts">
import { brand } from '../brand'
import { Spin } from 'ant-design-vue'

withDefaults(
  defineProps<{
    tip?: string
    size?: string
    cls?: string
    delay?: number
    spinning: boolean
    indicator?: boolean
    fixed?: boolean
  }>(),
  { size: 'large', fixed: true },
)
</script>

<style lang="less">
.loading * {
  box-sizing: border-box;
}

.loading {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid transparent;
}

.loading .effect-1,
.loading .effect-2 {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  border-left: 3px solid @secondary;
  border-radius: 50%;
  box-sizing: border-box;
}

.loading .effect-1 {
  animation: rotate 1s ease infinite;
}

.loading .effect-2 {
  animation: rotateOpacity 1s ease infinite 0.1s;
}

.loading .effect-3 {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  border-left: 3px solid @secondary;
  animation: rotateOpacity 1s ease infinite 0.2s;
  border-radius: 50%;
  box-sizing: border-box;
}

.loading .effects {
  transition: all 0.3s ease;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}

@keyframes rotateOpacity {
  0% {
    transform: rotate(0deg);
    opacity: 0.1;
  }
  100% {
    transform: rotate(1turn);
    opacity: 1;
  }
}
.spinner-brand {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}

.ant-spin-text {
  color: @primary;
}
.loading + .ant-spin-text {
  margin-top: 24px;
}
</style>