可线性渐变的环形进度条的实现探究

文章预览

本文主要介绍基于 NutUI Vue3 的  circleProgress  组件的设计与实现原理，是一个圆环形的进度条组件，用来展示操作的当前进度，支持修改进度以及渐变色。环形进度条是很常用的一个组件，特别是在管理后台数据统计的页面上或是一些需要用户等待的任务。 实现效果 效果如下图 实现思路 首先我们来理一下我们的需求，我们需要一个 圆形的可以改变进度，有动画的，可以支持渐变色的进度条 。 目前是有三种常见的实现方案： CSS 实现 SVG 实现 Canvas 实现 而 SVG 又分为两种，一种是直接用  circle  实现，另外一种是用  path  来画出来。 然后我们来看下一些国内出名的组件库实现方式： Antd Design 和 TDesign，varlet 采用 svg 的 Circle 实现，但是小编个人觉得 Antd Design 的渐变色的开始和结束是有问题的，TDesign 和 varlet 暂时不支持环形进度条线性 ………………………………