vue3写一个简单的进度条

好的，以下是一个基于 Vue3 的简单进度条：

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const progress = ref(0);

    // 模拟进度变化
    setInterval(() => {
      progress.value += 10;
      if (progress.value >= 100) {
        progress.value = 0;
      }
    }, 1000);

    return {
      progress,
    };
  },
};
</script>

<style scoped>
.progress-bar {
  width: 200px;
  height: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: green;
  transition: width 0.5s ease-in-out;
}
</style>

这个进度条通过 `progress` 变量控制进度，每隔一秒钟增加 10，直到达到 100 后清零。进度条的样式通过 CSS 实现。