JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

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

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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实现动态圆环百分比进度条所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程