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

按钮、进度圆和无限加载圆在同一个小部件中，可以通过自定义组件来实现。以下是一个示例的实现方式：

首先，创建一个名为"ButtonWithProgress"的自定义组件。
在该组件的模板中，可以使用HTML和CSS来定义按钮、进度圆和无限加载圆的样式和布局。
在组件的脚本中，可以使用JavaScript或其他编程语言来处理按钮的点击事件，并控制进度圆和无限加载圆的显示与隐藏。
在组件的属性中，可以定义一些可配置的参数，例如按钮的文本、颜色等。
在组件的方法中，可以定义一些公共的函数，例如启动加载、停止加载等。

下面是一个示例的代码实现：

<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>

在上述示例中，我们创建了一个名为"ButtonWithProgress"的自定义组件，其中包含了按钮、进度圆和无限加载圆。点击按钮时，进度圆会显示，模拟一个耗时操作；操作完成后，进度圆隐藏，无限加载圆显示，模拟加载过程；加载完成后，无限加载圆隐藏。

这个自定义组件可以在前端开发中广泛应用，例如在表单提交时显示加载状态，或者在异步请求数据时显示加载状态等。

推荐的腾讯云相关产品：腾讯云云开发（https://cloud.tencent.com/product/tcb）