vue2中 进度条加载 三个圆圈

在Vue.js 2.x中实现一个进度条加载效果，通常会使用组件结合 CSS 和 Vue 的绑定机制来展示三个动态变化的圆形进度指示器。这可以创建一个类似于百分比完成度的环形进度条。这里简单描述一种常见的实现方式：

1. 首先，创建一个名为`LoadingCircle.vue`的自定义组件，它包含三个圆形元素分别代表加载过程的不同阶段。

<template>
  <div class="progress-circles">
    <div :style="{ transform: 'rotate(' + (0 - progress * 360) + 'deg)' }" class="circle circle-1"></div>
    <div :style="{ transform: 'rotate(' + ((1 / 3) - progress * 360) + 'deg)' }" class="circle circle-2"></div>
    <div :style="{ transform: 'rotate(' + ((2 / 3) - progress * 360) + 'deg)' }" class="circle circle-3"></div>
  </div>
</template>

<script>
export default {
  props: {
    progress: { type: Number, required: true }
  },
  data() {
    return {};
  }
}
</script>

<style scoped>
.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  transition: transform 0.3s ease;
}

.circle-1,
.circle-2,
.circle-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

2. 然后，在需要显示加载进度的地方，通过`v-bind:progress`绑定数据到`LoadingCircle`组件：

<template>
  <div>
    <LoadingCircle :progress="loadingProgress" />
  </div>
</template>

<script>
import LoadingCircle from './components/LoadingCircle.vue';

export default {
  components: {
    LoadingCircle
  },
  data() {
    return {
      loadingProgress: 0 // 当前的加载进度，范围通常是0到1
    };
  },
  // ...其他业务逻辑...
}
</script>

3. 最后，你可以根据需要更新`loadingProgress`值来模拟加载过程：

this.loadingProgress = Math.min(1, (currentStep / totalSteps)); // 当加载步骤完成时更新进度