xiangyuan-app/src/components/basic/ActivityIndicator.vue

<template>
  <view 
    class="nana-activity-indicator"
    :style="style"
  >

  </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,
  /**
   * 自定义样式
   */
  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),
    width: themeContext.resolveThemeSize(props.size),
    height: themeContext.resolveThemeSize(props.size),
    ...props.innerStyle,
  }
});
</script>

<style>
@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;
}
</style>