uniapp自定义进度条

在 UniApp 中自定义进度条可以通过使用 `uni-progress` 组件和 CSS 样式来实现。下面是一个简单的例子：

<template>
  <view class="progress-container">
    <uni-progress :percent="progress" :show-info="false"></uni-progress>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 50 // 设置初始进度
    };
  },
};
</script>

<style>
.progress-container {
  width: 200px; /* 设置进度条容器的宽度 */
  height: 10px; /* 设置进度条容器的高度 */
}

.uni-progress {
  width: 100%; /* 设置进度条的宽度 */
  height: 100%; /* 设置进度条的高度 */
}

.uni-progress-bar {
  background-color: #ff0000; /* 设置进度条的背景颜色 */
}
</style>

在上述代码中，我们使用了 `uni-progress` 组件来展示进度条，并设置了 `percent` 属性来控制进度条的进度。在 CSS 样式中，我们可以通过修改 `.uni-progress-bar` 类来自定义进度条的样式，比如设置背景颜色。

你可以根据自己的需求更改进度条容器和进度条的样式，以实现自定义进度条效果。