uni-app圆形进度条和Waiting动画分享

在uni-app中实现圆形进度条和Waiting动画，可以通过自定义组件和CSS动画来完成。下面是一些示例代码，展示了如何实现这两种效果。

圆形进度条

首先，我们创建一个名为CircleProgress.vue的自定义组件。

<template>
  <view class="circle-progress">
    <view class="circle-background"></view>
    <view :style="{transform: `rotate(${progress * 3.6}deg)`}" class="circle-overlay">
      <view class="circle-fill" :style="{width: `${progress * 100}%`}"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
.circle-progress {
  position: relative;
  width: 100px;
  height: 100px;
}
.circle-background, .circle-overlay {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.circle-background {
  background-color: #e0e0e0;
}
.circle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(0, 100px, 100px, 50px);
}
.circle-overlay .circle-fill {
  height: 100%;
  background-color: #4caf50;
  transform-origin: left center;
}
</style>

Waiting动画

接下来，我们创建一个名为Waiting.vue的自定义组件。

<template>
  <view class="waiting">
    <view class="dot" v-for="(dot, index) in dots" :key="index" :style="{animationDelay: `${index * 0.1}s`}"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dots: Array(3).fill(null)
    }
  }
}
</script>

<style scoped>
.waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #4caf50;
  border-radius: 50%;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style>

这两个组件可以在你的uni-app项目中任意页面中使用，只需引入并注册即可。例如，在页面的<template>中：

<CircleProgress :progress="progressValue"></CircleProgress>
<Waiting></Waiting>

在页面的<script>中：

data() {
  return {
    progressValue: 75 // 圆形进度条的值
  }
}

这样，你就可以在uni-app项目中实现圆形进度条和Waiting动画效果。