minnan/src/components/basic/ActivityIndicator.vue

<template>
  <view 
    class="nana-activity-indicator"
    :style="style"
  >
    <!-- #ifndef APP-NVUE || MP -->
    <svg class="chrome-spinner" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" class="single-ring" :stroke-width="props.strokeWidth" />
    </svg>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE || MP -->
    
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme, type ViewStyle } from '../theme/ThemeDefine';

export interface ActivityIndicatorProps {
  /**
   * 加载中圆圈颜色
   */
  color?: string,
  /**
   * 加载中圆圈颜色
   */
  size?: string|number,
  /**
   * 加载中圆圈宽度
   */
  strokeWidth?: number,
  /**
   * 自定义样式
   */
  innerStyle?: ViewStyle,
}

const themeContext = useTheme();

const props = withDefaults(defineProps<ActivityIndicatorProps>(), {
  color: () => propGetThemeVar('ActivityIndicatorColor', 'primary'),
  size: () => propGetThemeVar('ActivityIndicatorSize', 60),
})

const style = computed(() => {
  return {
    borderTopColor: themeContext.resolveThemeColor(props.color),
    color: themeContext.resolveThemeColor(props.color),
    width: themeContext.resolveThemeSize(props.size),
    height: themeContext.resolveThemeSize(props.size),
    ...props.innerStyle,
  }
});
</script>

<style lang="scss">
/* #ifndef APP-NVUE || MP */

/* 旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 线段长度变化动画 */
@keyframes dash {
  0% {
    stroke-dasharray: 10 190; /* 最短状态 */
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100 100; /* 最长状态 */
    stroke-dashoffset: -40;
  }
  100% {
    stroke-dasharray: 10 190; /* 回到最短 */
    stroke-dashoffset: -200;
  }
}


.nana-activity-indicator {
  .chrome-spinner {
    width: 100%;
    height: 100%;
    animation: spin 1.5s linear infinite;
    
    .single-ring {
      fill: none;
      stroke-width: 5;
      stroke-linecap: round;
      stroke: currentColor; /* 单色灰色 */
      stroke-dasharray: 20 160; /* 控制线段长度 */
      animation: dash 1.5s ease-in-out infinite;
    }
  }
}
/* #endif */

/* #ifdef APP-NVUE || MP */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.nana-activity-indicator {
  width: 50px;
  height: 50px;
  border: 5px solid transparent;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-sizing: border-box;
}
/* #endif */
</style>