手把手使用 SVG + CSS 实现渐变进度环效果

效果

在这里插入图片描述

轨道

使用 svg 画个轨道

在这里插入图片描述

  <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke="#333"></circle></svg>

简单的说，就是使用 circle 画个圆。需要注意的是，轨道实际是 circle 的 stroke，所以目标 svg 尺寸是 100，则圆的半径是 40，而 stroke 为 10。

接着，按设计，轨道只需要 3/4 个圆即可：

在这里插入图片描述

<!-- 3/4 track before rotate --><!-- circumference = radius * 2 * PI = 40 * 2 * Math.PI = 251.3274 -->
<!-- stroke-dasharray left = circumference * percent = 251.3274 * 0.75 = 188.4955 -->
<!-- stroke-dasharray right = circumference * (1 - percent) = 251.3274 * (1 - 0.75) = 62.8318 --><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" stroke="#333"></circle></svg>

为了实现这轨道，这个时候需要用到 stroke-dasharray。

为了更好理解这里 stroke-dasharray 的作用，先画一个 line：

在这里插入图片描述

  <svg viewBox="0 0 300 10" style="display: block;"><line x1="0" y1="5" x2="300" y2="5" stroke-width="10" stroke="#333" stroke-dasharray="75,25"></line></svg>

简单的说，上面 line 长 300，每画一段 75 的 stroke，接着留空一段 25，如此重复，正好重复 3 次，刚好铺满了 300 的长度。

应用到 circle 也是如此，只是它是绕着圆，逆时针的画 stroke，类比的举例：

在这里插入图片描述

stroke-dasharray 的是长度，这里就需要通过计算周长，得出 A 与 E 分别是多长：

周长 = 半径 * 2 * PI = 40 * 2 * Math.PI = 251.3274
A = 周长 * 3/4 = 251.3274 * 0.75 = 188.4955
E = 周长 * 1/4 = 251.3274 * 0.25 = 62.8318

现在还要使用 transform 旋转 135 度以满足需求：

在这里插入图片描述

<!-- 3/4 track after rotate 135deg --><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle></svg>

进度条

先画一个纯色的进度条：

在这里插入图片描述

body {background: black;
}.gauge {position: relative;display: inline-block;
}.gauge > svg {width: 200px;height: 200px;
}.gauge > span {color: #fff;position: absolute;top: 50%;left: 0;width: 100%;text-align: center;transform: translate(0, -50%);font-size: 2em;
}

<!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.10 = 18.8495 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.10) + 62.8318 = 232.4778 -->
<div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="18.8495,232.4778" transform="rotate(135, 50, 50)" stroke="#ffff00"></circle></svg><span>10%</span>
</div><!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.50 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.50) + 62.8318 = 157.0795 -->
<div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="94.2477,157.0795" transform="rotate(135, 50, 50)" stroke="#ffff00"></circle></svg><span>50%</span>
</div><!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 1.00 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 1.00) + 62.8318 = 157.0795 -->
<div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#ffff00"></circle></svg><span>100%</span>
</div>

有个很重要的前提，例如图中的 10%、50%、100% 的百分比，是基于那 3/4 轨道的，不是整个圆，所以计算 stroke-dasharray 的时候，实际考虑的是 3 个部分：

在这里插入图片描述

10%

A = s1 = 周长 * 3/4 * progress = 251.3274 * 0.75 * 0.10 = 18.8495
E = s2 + s3 = 周长 * 3/4 * (1 - progress) + 周长 * 1/4 = 251.3274 * 0.75 * (1 - 0.10) + 251.3274 * 0.25 = 232.4778

50%

A = s1 = 周长 * 3/4 * progress = 251.3274 * 0.75 * 0.50 = 94.2477
E = s2 + s3 = 周长 * 3/4 * (1 - progress) + 周长 * 1/4 = 251.3274 * 0.75 * (1 - 0.50) + 251.3274 * 0.25 = 157.0796

100%

A = s1 = 周长 * 3/4 * progress = 251.3274 * 0.75 * 1.00 = 188.4955
E = s2 + s3 = 周长 * 3/4 * (1 - progress) + 周长 * 1/4 = 251.3274 * 0.75 * (1 - 1.00) + 251.3274 * 0.25 = 62.8318

渐变

在这里插入图片描述

渐变由最初的从左到右，跟随轨道的 rotate，最后变成从右上到左下，也就意味着，此处的渐变并不是跟随轨道从 0 到 100%，仅实现了类似的感觉的模拟。

在这里插入图片描述

<!-- progress bar with gradient --><!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.30 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.30) + 62.8318 = 157.0795 -->
<div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="56.5486,194.7786" transform="rotate(135, 50, 50)" stroke="url(#gauge-gradient)"></circle></svg><span>30%</span>
</div><!-- stroke-dasharray left = circumference * 0.75 * percent = 188.4955 * 0.80 = 94.2477 -->
<!-- stroke-dasharray right = circumference * 0.75 * (1 - percent) + circumference * (1 - 0.75) = 188.4955 * (1 - 0.80) + 62.8318 = 157.0795 -->
<div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="150.7964,100.5308" transform="rotate(135, 50, 50)" stroke="url(#gauge-gradient)"></circle></svg><span>80%</span>
</div>

动画

最后，为了实现“效果”中的动画，需要 CSS 配合 JS 实现：

<!-- with animation --><div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="188.4955,62.8318" transform="rotate(135, 50, 50)" stroke="#333"></circle><circle id="circle" cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke-dasharray="0,251.3274" transform="rotate(135, 50, 50)" stroke="url(#gauge-gradient3)"></circle></svg><span>100%</span>
</div>

#circle {transition: all 1s linear;
}

(function() {const radius = 40;const trackPercent = 0.75const circumference = 40 * 2 * Math.PI;const percent = 1.00;const strokeDasharrayLeft = circumference * trackPercent * percentconst strokeDasharrayRight = circumference * trackPercent * (1 - percent) + circumference * (1 - trackPercent)const circle = document.querySelector('#circle');function change() {const strokeDasharray = circle.getAttribute('stroke-dasharray').split(',')const left = parseFloat(strokeDasharray[0])const right = parseFloat(strokeDasharray[1])if (left === 0) {circle.setAttribute('stroke-dasharray', `${strokeDasharrayLeft},${strokeDasharrayRight}`)} else {circle.setAttribute('stroke-dasharray', `0,251.3274`)}}setTimeout(function() {setInterval(function() {change()}, 1000)change()}, 0)
})();

JS 的主要作用就是动态的计算 stroke-dasharray，并配合 CSS 的 transition all 即可实现。

Done!

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/389527.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Gin】深度解析：在Gin框架中优化应用程序流程的责任链设计模式(下)

【Gin】深度解析：在Gin框架中优化应用程序流程的责任链设计模式(下)

【Gin】深度解析&#xff1a;在Gin框架中优化应用程序流程的责任链设计模式(下) 大家好 我是寸铁&#x1f44a; 【Gin】深度解析&#xff1a;在Gin框架中优化应用程序流程的责任链设计模式(下)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 本次文章分为上下两部分&#xf…
阅读更多...
计算机毕业设计Hadoop+Spark旅游景点可视化 旅游景点推荐系统 景区游客满意度预测与优化 Apriori算法 景区客流量预测 旅游大数据 景点规划

计算机毕业设计Hadoop+Spark旅游景点可视化 旅游景点推荐系统 景区游客满意度预测与优化 Apriori算法 景区客流量预测 旅游大数据 景点规划

### 开题报告 **论文题目&#xff1a;** 基于Spark的旅游景点可视化系统的设计与实现 **研究背景与意义&#xff1a;** 随着旅游业的快速发展&#xff0c;人们对旅游信息的获取和处理需求越来越高。传统的旅游信息系统虽然能够提供静态的数据查询和展示功能&#xff0c;但在…
阅读更多...
C++（区别于C的）基础内容总结

C++（区别于C的）基础内容总结

参考&#xff1a; C 教程 | 菜鸟教程 (runoob.com) 简介 C 被认为是一种中级语言&#xff0c;它综合了高级语言和低级语言的特点。 C 是由 Bjarne Stroustrup 于 1979 年在新泽西州美利山贝尔实验室开始设计开发的。C 进一步扩充和完善了 C 语言&#xff0c;最初命名为带类的C&…
阅读更多...
Java中类装载的执行过程

Java中类装载的执行过程

类装载的执行过程 类从加载到虚拟机中开始&#xff0c;直到卸载为止&#xff0c;它的整个生命周期包括了&#xff1a;加载、验证、准备、解析、初始化、使用和卸载这7个阶段。其中&#xff0c;验证、准备和解析这三个部分统称为连接&#xff08;linking&#xff09;。 1.加载 …
阅读更多...
学习记录（9）：Prompt提示词技巧

学习记录（9）：Prompt提示词技巧

依旧照例先感谢前辈们的慷慨分享 今天学习的是这篇文章↓ 原文&#xff1a;转自公主号“博金斯的AI笔记” —《4篇Prompt论文的提示词技巧, 3 个 GPTs 实例测试》 文章目录 一、提示词框架二、逻辑链&#xff08;Chain of thought&#xff09;三、思维树&#xff08;Tree of th…
阅读更多...
[渗透测试学习] PermX-HackTheBox

[渗透测试学习] PermX-HackTheBox

文章目录 PermX-HackTheBox信息搜集漏洞利用权限提升参考文章PermX-HackTheBox 信息搜集 nmap扫描一下端口 nmap -sC -v 10.10.11.23扫描结果如下 PORT STATE SERVICE 22/tcp open ssh | ssh-hostkey: | 256 e2:5c:5d:8c:47:3e:d8:72:f7:b4:80:03:49:86:6d:ef (ECDSA…
阅读更多...
二维码直达App，Xinstall为你打通运营任督二脉

二维码直达App，Xinstall为你打通运营任督二脉

在移动互联网时代&#xff0c;App的推广和运营显得尤为重要。然而&#xff0c;许多企业在投入大量资源进行App推广和运营时&#xff0c;总会遇到一些棘手的问题&#xff0c;如用户转化率低、数据分析困难等。今天&#xff0c;我们要为大家揭秘一个神奇的助手——Xinstall&#…
阅读更多...
Github2024-07-29 开源项目周报Top15

Github2024-07-29 开源项目周报Top15

根据Github Trendings的统计，本周(2024-07-29统计)共有15个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Python项目2Java项目2HTML项目2C项目2TypeScript项目2JavaScript项目2非开发语言项目1Vue项目1Go项目1Dart项目1C++项目1Rust项目1Jupyter Note…
阅读更多...
【Linux】-----进度条小程序

【Linux】-----进度条小程序

目录 前言 基本知识 Ⅰ、回车和换行 Ⅱ、缓冲区 两个有意思的现象 简单定义 刷新缓冲区 简易倒计时程序 进度条代码 多文件下makefile写法 一代(无任何场景) procs1.h代码 procs1.c代码 主函数main1.c 一代运行结果&#xff1a; 二代 (搭配下载场景) procs2.c代…
阅读更多...
在jmeter中使用javascript脚本

在jmeter中使用javascript脚本

工作上遇到一个压力测试的需求&#xff0c;需要测试几个考试相关的接口。其中有一个获取试题详情的接口&#xff0c;和一个提交答题信息的接口。后一个接口以上一接口的返回内容为参数&#xff0c;添加上用户的答案即可。jmeter提供了非常多的方式可以实现该需求&#xff0c;这…
阅读更多...
MySQL分组查询有关知识总结

MySQL分组查询有关知识总结

目录 4. 分组查询&#xff08;group by&#xff09; 4.1 概述 4.2 分组函数 4.2.1 单个使用 4.2.2 组合使用 4.2.3 注意&#xff01; 4.3 group by 4.3.1 单个字段 4.3.2 多个字段 4.3.3 提醒&#xff01; 4.4 having 4.5 分组查询演示 4. 分组查询&#xff08;…
阅读更多...
稀疏矩阵和稠密矩阵

稀疏矩阵和稠密矩阵

1.csr_matrix compress sparse row&#xff0c;因此csr是按行压缩的稀疏矩阵。 稀疏矩阵由于0值过多&#xff0c;仅记有值的矩阵位置索引&#xff0c;如下图打印所示。 更多矩阵介绍参考这篇博文【Scipy学习】Scipy中稀疏矩阵用法解析&#xff08;sp.csr_matrix&#xff1b;s…
阅读更多...
国家网络身份个人认证方法

国家网络身份个人认证方法

申领网络身份认证后&#xff0c;用户会得到一张虚拟的“网络身份证”&#xff0c;它可以向需要实名认证的互联网平台进行认证&#xff0c;不再需要输入姓名和身份证号等信息。 申请方式&#xff1a;各手机应用平台搜索国家网络身份认证即可&#xff08;必须支持NFC才能申请&am…
阅读更多...
大模型三种模式Embedding、copilot、Agent

大模型三种模式Embedding、copilot、Agent

大模型的三种应用模式——Embedding、Copilot、Agent——代表了不同级别的智能化和自动化程度&#xff0c;以及与人类用户的交互方式。下面是每种模式的具体解释&#xff1a; 嵌入模式&#xff08;Embedding Mode&#xff09; 定义&#xff1a;在嵌入模式中&#xff0c;大模型…
阅读更多...
每日一题——贪心算法

每日一题——贪心算法

1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; 题解&#xff1a; 一开始有点理解错他的意思&#xff0c;以为是i是题目中会给出&#xff0c;所以一开始没有什么思路&#xff0c;然后当看了题解之后&#xff0c;就知道了原来i是自己订的&#xff0c…
阅读更多...
认识经典蓝牙

认识经典蓝牙

现在BLE很流行&#xff0c;本人接触BLE也更多&#xff0c;而对经典蓝牙BR/EDR的开发知之甚少&#xff0c;而且网上关于经典蓝牙的资料也很少&#xff0c;所以&#xff0c;想要有更多了解。 参考&#xff1a; https://www.nordicsemi.cn/news/bluetoothle-and-bluetoothclassic/…
阅读更多...
网页设计师必备！10个免费的设计素材网站推荐

网页设计师必备！10个免费的设计素材网站推荐

当网页设计师使用网页设计材料时&#xff0c;他们会优先考虑那些免费和高质量的网页设计材料网站。找到一个免费和高质量的网页设计材料网站并不容易&#xff0c;有些网站要么需要打开材料网站成员&#xff0c;要么设计材料质量很差。即时设计总结了10个免费的网页设计材料网站…
阅读更多...
WEB服务器的详解与部署

WEB服务器的详解与部署

WEB服务器也称为网页服务器或HTTP服务器 WEB服务器使用的协议是HTTP或HTTPS HTTP协议默认端口号&#xff1a;TCP 80 HTTPS协议默认端口号&#xff1a;TCP 443 浏览器其实就是 HTTP 客户端 WEB服务器发布软件 微软&#xff1a;IIS(可以发布web网站和FTP站点)linux&#x…
阅读更多...
本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——2Yolo使用之ONNX模型准备

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——2Yolo使用之ONNX模型准备

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——2Yolo使用之ONNX模型准备 ​ 大家好&#xff0c;因为板端BPU环境&#xff0c;可以加速目标检测的速度&#xff0c;所以今天在此先给大家带来如何准备一个模型&#xff0c;下一期会给大家带来如何在板端部…
阅读更多...
PromQL全方位解读：监控与性能分析的关键技术

PromQL全方位解读：监控与性能分析的关键技术

一、PromQL简介 Prometheus Query Language (PromQL) 是一个专为Prometheus监控系统设计的强大查询语言&#xff0c;它允许用户对收集的时间序列数据进行高效、灵活的查询和分析。PromQL的设计哲学在于提供简洁而强大的语法&#xff0c;以支持复杂的数据检索和实时监控场景。本…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023