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

更新时间：2021年09月16日 14:46:13 作者：浮夸的小白

这篇文章主要为大家详细介绍了Vue实现动态圆环百分比进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

效果

实现步骤

画一个饼图

.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; }
}

使用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`
    }
}

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目中按钮防抖处理实现过程
这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下
2023-08-08
Vue3项目中的hooks的使用教程
今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，快跟随小编一起来学习学习吧
2022-08-08
Vue.js 插件开发详解
本文会通过一个简单的vue-toast插件，来帮助了解掌握插件的开发和使用。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
利用vue实现打印页面的几种方法总结
在项目里有个打印功能,将页面的部分内容打印出来,所以下面这篇文章主要给大家介绍了关于利用vue实现打印页面的几种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
Vue让router-view默认显示页面操作方法
一个home页面,点击左边的菜单栏,右边显示页面,因此都知道在右边放一个router-view然后配置路由即可,然而问题出现在：重新打开的时候,默认是白色空的,遇到这样的问题如何解决呢,下面小编给大家分享Vue让router-view默认显示页面操作方法,感兴趣的朋友一起看看吧
2024-03-03
浅谈VUE uni-app 开发环境
这篇文章主要介绍了uni-app的开发环境，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
降低vue-router版本的2种解决方法实例
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,下面这篇文章主要给大家介绍了关于降低vue-router版本的2种解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
uniapp使用v-loading并且不引入element-ui的操作方法
这篇文章主要介绍了uniapp使用v-loading并且不引入element-ui,首先创建loading.js，创建lloading.scss，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
vue中跨域以及sessionId不一致问题及解决
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Pinia 的 Setup Stores 语法使用实例详解
这篇文章主要为大家介绍了Pinia 的 Setup Stores 语法使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09

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

效果

实现步骤

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具