按钮、进度圆和无限加载圆在同一个小部件中？

<template>
  <div class="button-with-progress">
    <button @click="handleClick" :style="{ backgroundColor: buttonColor }">{{ buttonText }}</button>
    <div v-if="showProgress" class="progress-circle"></div>
    <div v-if="showLoading" class="loading-circle"></div>
  </div>
</template>

<script>
export default {
  name: 'ButtonWithProgress',
  data() {
    return {
      showProgress: false,
      showLoading: false,
      buttonText: 'Click me',
      buttonColor: 'blue',
    };
  },
  methods: {
    handleClick() {
      this.showProgress = true;
      // 模拟异步操作
      setTimeout(() => {
        this.showProgress = false;
        this.showLoading = true;
        // 模拟加载完成后的操作
        setTimeout(() => {
          this.showLoading = false;
        }, 2000);
      }, 1000);
    },
  },
};
</script>

<style>
.button-with-progress {
  position: relative;
}

button {
  padding: 10px 20px;
  border: none;
  color: white;
  cursor: pointer;
}

.progress-circle,
.loading-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.progress-circle {
  border: 2px solid gray;
  border-top-color: blue;
  animation: spin 1s linear infinite;
}

.loading-circle {
  border: 2px solid gray;
  border-top-color: red;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>