Document

--- theme: smartblue highlight: a11y-dark --- # 前言本文将介绍几个我最近遇到的奇葩进度条，需求看似繁琐，但是我们可以用平常**巧妙的属性**来解决，再也不用复杂的html结构和颜色渐变算法。 # “奇葩”的环形渐变进度条 **需求描述**：需要环形渐变的进度条让人快速理解进度实现程度，10-20%是青绿色，20%到30%是黄色..... 乍一看是不是很容易，但是我思来想去用了**echarts的svg渲染**，但是只要到了90%，一定会渐变到青绿色，从红色渐变到青绿色，做实让我心一凉。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41929902d8da438ca8d24d4e10e8bf55~tplv-k3u1fbpfcp-watermark.image?) ## 思路一：径向渐变分割网上思路很多，稍微复杂的比如分割区域做大量的颜色的径向渐变。原理是将**rgba转为16进制计算颜色插值**。这样我们通过**计算step步长**就可以根据细分做渐变了。但是好像无法很好满足我们的指定区域10%-20%是某种颜色，虽然可以但是也太麻烦了。 ```js function gradientColor(startRGB, endRGB, step) { let startR = startRGB[0] let startG = startRGB[1] let startB = startRGB[2] let endR = endRGB[0] let endG = endRGB[1] let endB = endRGB[2] let sR = (endR - startR) / step // 总差值 let sG = (endG - startG) / step let sB = (endB - startB) / step var colorArr = [] for (var i = 0; i < step; i++) { let color = 'rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')' colorArr.push(color) } return colorArr } ``` ## 思路二：CSS结合svg 我们可以用css的**background: conic-gradient** ```js background: conic-gradient(#179067, #62e317, #d7f10f, #ffc403, #fcc202, #ff7327, #ff7327, #FF5800, #ff5900, #f64302, #ff0000, #ff0000); ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb33d25feb4946298975dae7afd97a19~tplv-k3u1fbpfcp-watermark.image?) 看着好像不错，那么接下来只要我们做个遮罩，然后用svg的strokeDashoffset来形成我们的环状进度条就可以了。至于百分之几到百分之几我们可以将conic-gradient内部属性做个百分比的拆分就可以了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18db7b3e25764cb096487231398ad197~tplv-k3u1fbpfcp-watermark.image?) ```html Document

``` 这里简单讲下逻辑，我们通过计算环的周长，总长其实就是stroke-dasharray，通过strokeDashoffset来偏移我们的虚线线段，那么开始的就是我们的实线线段。其实就是一个蚂蚁线。让这个线长度等于我们的环长度，通过api让实线在开始的位置。 ## 兼容Safari浏览器发上去几周后，测试给提了一个bug，它的环怎么反着来了，原来safari的dasharray的实现和虚线的第一个元素是不是实线，而在chrome中第一个是虚线，那么这里要做个简单的兼容了。 ```js function init (percent) { if (!percent || !document) return const circle = document.querySelector(`.circle-container .progress-circle-${props.k} circle`) as SVGCircleElement if (!circle) return const radius = circle.r.baseVal.value const outerRadius = circle.cx.baseVal.value const innerCircumference = radius * 2 * Math.PI const outerCircumference = outerRadius * 2 * Math.PI /** *设置百分比 * @param percent 偏移白色环状的量 */ function setProgress (percent) { const progress = (percent / 100) * innerCircumference const userAgent = navigator.userAgent if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') < 0) { circle.style.strokeDashoffset = (outerCircumference + (outerCircumference - progress)) + '' } else { circle.style.strokeDashoffset = -(progress) + '' } } const whitePercent = percent setProgress(whitePercent) } ``` ## 最终效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa2869a13bad488689dcac2416d8f46d~tplv-k3u1fbpfcp-watermark.image?) # "奇葩"的横向进度条在我们平常需求用用组件库实现进度条很容易，但是我们看看这个需求的进度条的场景，文字要能被裁剪成黑白两色。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2c1dab574654f03a0880bb837a77d68~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8684b267fc19477685abb2ffb13c20d3~tplv-k3u1fbpfcp-watermark.image?) ## 思路一： overflow：hidden 具体就不演示了，内部通过两个副本的文案，一套白色一套黑色，通过定位层级的不同，**overflow：hidden**来隐藏，缺点是相对繁琐的dom结构。 ## 思路二： background-clip 裁剪 ```html Document

888w/12

100%/10s

``` 这里我们主要用了**background-clip**的text和padding-box两个裁剪，一个裁剪文本，一个裁剪背景延伸至内边距padding外沿。不会绘制到边框处。在js中我们通过setProperty修改css变量即可。 ## 最终效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/157426960ac8464c8e929a38a719a544~tplv-k3u1fbpfcp-watermark.image?) ## 附录 1. [卷出新高度，几百行的Canvas游戏秘籍 - 掘金 (juejin.cn)](https://juejin.cn/post/7235534634776248381) 2. [为什么我的WebGL开发这么丝滑 🌊](https://juejin.cn/post/7212101192745566264) 3. [Echarts无法实现这个曲线图😭，那我手写一个 - 掘金 (juejin.cn)](https://juejin.cn/post/7224886702883258424) 4. [Redux已死，那就用更爽的Zustand - 掘金 (juejin.cn)](https://juejin.cn/post/7232726594208759867)