CSS-SVG-环形进度条

在这里插入图片描述

线上代码地址

<div class="circular-progress-bar"><svg><circle class="circle-bg" /><circle class="circle-progress" style="stroke-dasharray: calc(2 * 3.1415 * var(--r) * (var(--percent) / 100)), 1000" /></svg>
</div><br />
<br />
<p><label>进度</label><input type="range" min="0" max="100" value="0" oninput="changeConfig(this, '--percent')" />
</p>
<p><label>环形大小</label><input type="range" min="100" max="400" value="200" oninput="changeConfig(this, '--size', 'px')" />
</p>
<p><label>进度条宽度</label><input type="range" min="1" max="50" value="10" oninput="changeConfig(this, '--progress-border', 'px')" />
</p>
<p><label>进度条颜色</label><input type="color" value="#ff0000" oninput="changeConfig(this, '--progress-color')" />
</p>
<p><label>背景色</label><input type="color" value="#cccccc" oninput="changeConfig(this, '--bg-color')" /><button onclick="changeDemo({ value: 'transparent' }, '--bg-color')">透明</button>
</p>
.circular-progress-bar {--size: 200px; /* 环形大小 */--percent: 0; /* 进度 */--progress-border: 10px; /* 进度条宽度:要带单位,不然计算半径的时候有问题,要和 --size 统一 */--progress-color: red; /* 进度条颜色 */--bg-color: green; /* 不是进度条的颜色 */position: relative;width: var(--size);height: var(--size);border-radius: 50%;
}
.circular-progress-bar::before {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);counter-reset: progress var(--percent);/* 用于重置计数器的初始值,并且命名为progress */content: counter(progress) "%";white-space: nowrap;font-size: 18px;
}.circular-progress-bar svg {width: 100%;height: 100%;
}
.circular-progress-bar svg circle {--r: calc((var(--size) - var(--progress-border)) / 2);fill: none;stroke-width: var(--progress-border);stroke-linecap: round;stroke: var(--progress-color);transition: stroke-dasharray 0.3 linear;cx: calc(var(--size) / 2);cy: calc(var(--size) / 2);r: var(--r);
}
.circular-progress-bar svg .circle-bg {stroke: var(--bg-color);
}.circular-progress-bar svg .circle-progress {opacity: var(--percent); /* 进度:0 的时候不需要显示 */
}
const progressEl = document.querySelector('.circular-progress-bar');function changeConfig({ value }, property, unit = '') {progressEl.style.setProperty(property, value + unit);
}

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

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

相关文章

影响晶振频率稳定性的因素及解决方法

晶振作为电子设备中的核心元件&#xff0c;其频率稳定性对设备的性能和可靠性具有重要影响。晶发电子将介绍影响晶振频率稳定性的因素&#xff0c;并探讨相应的解决方法。 一、影响晶振频率稳定性的因素 频率&#xff1a;晶振的频率是影响其性能的最重要因素之一。在选择晶振…

初识Docker-什么是docker

Docker是一个快速交付应用、运行应用的技术 目录 一、Docker 二、运用场景 一、什么是Docker&#xff1f;它的作用是什么&#xff1f; Docker如何解决大型项目依赖关系复杂&#xff0c;不同组件依赖的兼容性问题? Docker允许开发中将应用、依赖、函数库、配置一起打包&…

基于SSM的勤工助学系统的设计与实现论文

勤工助学系统设计 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的电商平台以及购物管理系统。本文介绍了勤工助学系统的开发全过程。通过分析企业对于勤工助学系统的需求&#xff0c;创建了一个计算机管理勤工助学系统的方案。文章介绍了勤工助学系…

SpringBoot访问外部接口的常见方式

文章目录 SpringBoot访问外部接口模拟服务接口RestTemplatepom.xmlRestTemplateConfigClientTestRestTemplateController.java结果 WebClientpom.xmlClientTestWebClientController.java结果 HttpClientpom.xmlClientTestHttpClientController.java结果 OkHttppom.xmlClientTes…

LeetCode Hot100 295.数据流的中位数

题目&#xff1a; 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() 初始…

linux sed命令操作大全

经常使用&#xff0c;但有些总记不全&#xff0c;有时候经常查找&#xff0c;这次全部捋清楚做备忘&#xff0c;有需要的小伙伴欢迎收藏起来哦&#xff01; 查、增、改、删一应俱全&#xff0c;非常详细&#xff01; 目录 一、查看 查看第2行 查看第2行到第3行 查看第1行、…

移动SEO:如何针对任何设备优化您的网站

您快速进行 Google 搜索并阅读一堆结果。然后&#xff0c;您会发现一些网站具有您正在寻找的答案。 但是你从SERP中选择的第一个&#xff0c;也是最有前途的网站&#xff0c;在你最喜欢的移动设备上无法正常工作。 所以&#xff0c;你关闭它&#xff0c;看看下一个网站是否有…

【Linux驱动】pinctrl 和 gpio子系统(一)—— pinctrl 节点解析,引入gpio子系统

裸机开发时&#xff0c;如果要点亮一个 LED&#xff0c;我们要做如下内容&#xff1a; 初始化时钟设置引脚复用为哪个功能&#xff0c;配置引脚的电气属性设置引脚的 IO 方向、初始值 有了设备树以后&#xff0c;我们可以通过 pinctrl 和 gpio 子系统来配置上述内容。 pinct…

基于深度学习的森林火焰烟雾检测系统(含UI界面,yolov8、Python代码,数据集)

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov8 yolov8主要包含以下几种创新&#xff1a;         1. 添加注意力机制&#xff08;SE、CBAM等&#xff09;         2. 修改可变形卷积&#xff08;DySnake-主干c…

听GPT 讲Rust源代码--src/tools(18)

File: rust/src/tools/rust-analyzer/crates/ide-ssr/src/from_comment.rs 在Rust源代码中的from_comment.rs文件位于Rust分析器&#xff08;rust-analyzer&#xff09;工具的ide-ssr库中&#xff0c;它的作用是将注释转换为Rust代码。 具体来说&#xff0c;该文件实现了从注…

Django(二)

1.django框架 1.1 安装 pip install django3.21.2 命令行 创建项目 cd 指定目录 django-admin startproject 项目名mysite ├── manage.py [项目的管理工具] └── mysite├── __init__.py├── settings.py 【配置文件&#xff0c;只有一部分…

基于SpringBoot的考研专业课程管理系统 JAVA简易版

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

Docker命令集

一、常用命令: run run 从映像创建并运行新容器 $ docker run -it -v $(pwd):/home/zhangsan --name ohos ubuntu:20.04说明&#xff1a;命令表示创建一个名为ohos&#xff0c;系统镜像为ubuntu 20.04的容器&#xff1b;这个容器运行在交互模式下&#xff0c;并且将当前目录…

Mybatis Flex 常见用法

文章目录 Mybatis Flex 常见用法一、枚举二、自动填充2.1 方式一&#xff1a;Table 配置2.2 方式二&#xff1a;Column 配置 三、分页3.1 分页统一接口3.2 实现分页接口3.3 使用 四、关联查询4.1 RelationOneToOne&#xff1a;一对一4.1.1 单向关联4.1.2 双向关联 4.2 Relation…

在laravel 项目中 composer.json 中 autoload 配置是什么作用

在 Laravel 项目中&#xff0c;composer.json 文件是一个重要的文件&#xff0c;它用于定义项目依赖以及一些 Composer 的配置。其中 autoload 是一个键&#xff08;key&#xff09;&#xff0c;其下定义了如何自动加载 PHP 类库。 autoload 的作用是告诉 Composer 和 PHP 解释…

【krita】实时绘画 入门到精通 海报+电商+装修+修复手部

安装插件 首先打开comfyUI&#xff0c;再打开krita&#xff0c;出现问题提示&#xff0c; 打开 cd custom_nodes 输入命令 安装控件 git clone https://github.com/Acly/comfyui-tooling-nodes.git krita基础设置 设置模型 设置lora &#xff08;可设置lora强度 增加更多…

华纳云:怎么用python实现进程,线程和协程

在Python中&#xff0c;可以使用multiprocessing模块来创建进程&#xff0c;使用threading模块来创建线程&#xff0c;以及使用asyncio模块来创建协程。以下是简单的示例代码演示如何使用Python实现进程、线程和协程&#xff1a; 进程&#xff08;multiprocessing&#xff09;…

网站使用https认证

随着网络的普及和依赖程度的增加&#xff0c;网站安全性问题也日益凸显。为了确保用户和网站之间的数据传输安全&#xff0c;采用HTTPS认证已经变得至关重要。 1.数据安全是首要任务 在互联网上&#xff0c;信息传输是网站运作的基础。然而&#xff0c;未加密的传输容易受到中…

嵌入式中的基本定时器

学习目标 理解基本定时器的作用掌握定时器开发流程掌握基本定时器中断处理的操作流程掌握AHB和APB时钟查询方式理解周期,分频系数,周期计数,分频计数。掌握调试策略学习内容 基本定时器 只能用于定时计时操作,没有输出引脚通道的定时器,在GD32中, TIMER5和TIMER6为基本…

电子科大软件测试~第三次作业

第三次作业 第一题 采用JUnit软件测试框架进行测试程序编程&#xff0c;实现对下面java程序进行单元测试&#xff0c;找出其中缺陷。然后修改缺陷&#xff0c;直到通过单元测试&#xff0c;给出测试程序脚本和运行结果界面。 public class getMax {public int get_max(int x…