<template>
  <view class="loading-wrap">
    <view class="loading-spinner" />
    <text class="loading-text">{{ text }}</text>
  </view>
</template>

<script setup lang="ts">
defineProps<{ text?: string }>()
</script>

<style lang="scss" scoped>
.loading-wrap {
  @include flex-center;
  flex-direction: column;
  padding: 80px 0;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid $bd;
  border-top-color: $pri;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  margin-top: 20px;
  color: $tx3;
  font-size: var(--tk-font-body-sm);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
