vue进度条怎么循环加载

要实现 vue 的循环加载进度条，你可以使用 Vue.js 的计时器（`setInterval()`）来实现。以下是一个示例代码：

<template>
  <div>
    <div class="progress-bar" :style="{ width: width + '%' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 0,
      intervalId: null,
    };
  },
  mounted() {
    this.startProgress();
  },
  methods: {
    startProgress() {
      this.intervalId = setInterval(() => {
        if (this.width === 100) {
          this.width = 0;
        } else {
          this.width += 10;
        }
      }, 1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
};
</script>

<style>
.progress-bar {
  height: 10px;
  background-color: blue;
}
</style>

在上面的代码中，我们首先在 `data` 中定义了一个 `width` 变量和一个 `intervalId` 变量，分别用于保存进度条的宽度和计时器的 ID。然后，在 `mounted` 钩子中调用 `startProgress` 方法来启动计时器。

`startProgress` 方法中使用 `setInterval` 函数来定时更新进度条的宽度。当进度条的宽度达到 100% 时，我们将其重置为 0，以实现循环加载的效果。最后，在 `beforeDestroy` 钩子中清除计时器，以防止内存泄漏。

在模板中，我们使用 `:style` 绑定来设置进度条的宽度，并将其绑定到 `width` 变量上。我们还为进度条添加了一些基本的 CSS 样式，以使其可见。

希望这个示例能帮助你实现循环加载进度条。