Vue实现动态圆环百分比进度条

最近在开发小程序的时候,碰到一个实现圆环百分比进度条的需求,类似如下设计图:

3FF44637-97EA-6F95-DAE6-42F736AD1475.png

小白的我感觉实现起来有难度,于是上百度看看别人是怎么做的,结果没找到一个满意的,要不是静态的实现,就是需要用到比较多的DOM操作,小程序还是尽量避免直接操作DOM

下面是我以Vue组件形式做的一个动态的实现,先上效果图:

效果

6A7D2BCE-5ECE-0043-40D8-D5E70B868994.gif

实现步骤

画一个饼图
.pie {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  margin-top: 40px;
  border-radius: 50%;
  background: #ccc;
  background-image: linear-gradient(to right, transparent 50%, #4479FD 0);
  color: transparent;
  text-align: center;
}
实现占比效果

通过添加伪元素遮挡和移动实现,代码如下:

.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 5s linear infinite, bg 10s step-end infinite;
}
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #4479FD; }
}

2018321A-FF98-FD8B-23FC-F6D824A00150.gif

使用CSS动画延迟属性

将上面的animation动画时间分别改为50, 100,这样可以直接在animation-delay传入相应的延迟秒数,比如-60s则是显示在百分之六十

animation-play-state: paused;
animation-delay: -60s;
实现圆环形状

直接在div里加上一个定位的div

<div class="pie">
  <div class="pie-inner">
  {{num}}%
  </div>
</div>
加上一个匀速动画
startAnimate (step, limit, speed) {
  setTimeout(() => {
  // num 为百分比
    if (this.num < limit) {
      this.num += step
      this.startAnimate(step, limit, speed)
    } else {
      this.num = limit
    }
  }, speed)
}
animation-delay绑定计算属性

实时根据num转化为相应的延迟秒数

computed: {
    delay () {
      return `-${this.num}s`
    }
}
总结

至此,一个动态的圆环百分比进度条基本实现了,还不是很完善,有什么意见或者疑问欢迎提出来~

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的
为您推荐
    暂时没有数据