当前位置：首页 > news >正文

最简单圆形进度条实现CSS+javascript，两端带圆弧

news 2026/4/1 1:17:24

两端是弧形的圆形进度条。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 定义css变量 */:root {--progress: 0%;--endRotate: 0deg;--contentSize: 100px/* 这位置改变整体进度条大小 */}/* 外圈 */.progress {position: relative;width: var(--contentSize);height: var(--contentSize);/* 进度条的颜色处理 */background: conic-gradient(#7095ff,#1752f7 var(--progress),/* 取得：root 中定义的progress值 */#ccc var(--progress),#ccc);border-radius: 50%;position: relative;transform: rotateY(0);}/* 内圈*/.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(var(--contentSize)*0.8);height: calc(var(--contentSize)*0.8);background-color: #fff;border-radius: 50%;}/* 进度条起点的圆 */.progress::before {position: absolute;display: inline-block;content: "";width: calc(var(--contentSize)*0.1);height: calc(var(--contentSize)*0.1);border-radius: 50%;background-color: #7095ff;top: 0;left: 50%;transform: translateX(-50%);}/* 进度条*/.end {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;transform: rotate(var(--endRotate));/* 取得：root 中定义的endRotate值 */}/* 进度条终点的圆 */.end::before {position: absolute;display: inline-block;content: "";width: calc(var(--contentSize)*0.1);height: calc(var(--contentSize)*0.1);border-radius: 50%;background-color: #1752f7;top: 0;left: 50%;transform: translateX(-50%);}</style></head><body><div class="progress"><div class="son"></div><div class="end"></div></div><script>// let root = document.querySelector(":root");//设置变量// root.style.setProperty("--progress", "50%");// 读取 CSS 变量//let rootStyle = getComputedStyle(root);//let progress = rootStyle.getPropertyValue("--progress");// 删除 CSS 变量//root.style.removeProperty("--progress");let jd = 0,root = document.querySelector(":root");let a = setInterval(function() {jd++;var bfb = jd / 100;root.style.setProperty("--progress", bfb * 100 + "%");root.style.setProperty("--endRotate", 360 * bfb + "deg");if (jd == 100) clearInterval(a)}, 100)</script></body>
</html>

最简单圆形进度条实现CSS+javascript，两端带圆弧

两端是弧形的圆形进度条。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title…...

编程日记 2025/3/9 7:50:19

vuejs 模板语法、条件渲染、v-for、事件处理、表单输入绑定

创建vue项目之后我们就可以开始写代码了，我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。我们通过vue建立的项目，它的结构是在一个vue文件内集成了HTML…...

编程日记 2025/3/9 7:44:12

论文阅读方法

文章目录步骤一：对论文进行自我判断阅读题目和关键词。阅读摘要阅读总结要点步骤二：阅读文章阅读图表和图表的注释阅读引言阅读实验部分阅读结果和作者对结果的讨论（创新点）要点步骤三：精度论文回答问题1回答问题2回…...

编程日记 2025/3/9 7:38:06

问题解决：Kali Linux 中配置启用 Vim 复制粘贴功能

在 Kali Linux 系统中，使用 XShell 或其他类似终端时，Vim 编辑器的默认设置并不支持直接进行复制和粘贴操作，这对于日常的开发工作或渗透测试人员来说可能会造成不便。幸运的是，通过简单的配置调整，可以让 Vim 轻松支持…...

编程日记 2025/3/9 7:35:02

Linux hexdump命令

hexdump 是 Linux 中一个强大的二进制文件查看工具，可以用于查看文件的十六进制、ASCII 或其他格式的转储内容。以下是常见用法及示例： 1. 查看文件头部（前 N 个字节） 语法 hexdump -n <字节数> -C <文件名>示例&am…...

编程日记 2025/3/9 7:33:00

Stable Diffusion教程|快速入门SD绘画原理与安装

什么是Stable Diffusion，什么是炼丹师？根据市场研究机构预测，到2025年全球AI绘画市场规模将达到100亿美元，其中Stable Diffusion（简称SD）作为一种先进的图像生成技术之一，市场份额也在不断增长&…...

编程日记 2025/3/9 7:31:58

系统架构设计师—系统架构设计篇—微服务架构

文章目录概述优势挑战概述微服务是一种架构风格，将单体应用划分成一组小的服务，服务之间相互协作，实现业务功能，每个服务运营在独立的进程中，服务间采用轻量级的通信机制协作（通常是HTTP/JSON&#xff0…...

编程日记 2025/3/9 7:24:52

Array and string offset access syntax with curly braces is deprecated

警告信息 “Array and string offset access syntax with curly braces is deprecated” 是 PHP 中的一个弃用警告（Deprecation Notice），表明在 PHP 中使用花括号 {} 来访问数组或字符串的偏移量已经被标记为过时。背景在 PHP 的早期版本…...

编程日记 2025/3/9 7:20:49

腾讯元宝：AI 时代的快速论文阅读助手

1. 背景与需求在 AI 研究领域，每天都会涌现大量学术论文。如何高效阅读并提取关键信息成为研究者的一大难题。腾讯元宝是腾讯推出的一款大模型，结合了**大语言模型（LLM）和自然语言处理（NLP）**技术&#x…...

编程日记 2025/3/9 7:18:47

基于单片机的风速报警装置设计

标题:基于单片机的风速报警装置设计内容:1.摘要本设计聚焦于基于单片机的风速报警装置，旨在解决传统风速监测缺乏实时报警功能的问题。采用单片机作为核心控制单元，结合风速传感器采集风速数据。经实验测试，该装置能准确测量 0 - 60m/s 范…...

编程日记 2025/3/9 7:17:46

1998-2022年各地级市第一产业占GDP比重/地级市第一产业占比数据（市辖区）

1998-2022年各地级市第一产业占GDP比重/地级市第一产业占比数据（市辖区） 1、时间：1998-2022年 2、指标：地级市第一产业占GDP比重/地级市第一产业占比 3、来源：城市统计年鉴 4、范围：299个地级市 5、缺…...

编程日记 2025/3/9 7:13:42

IntersectionObserver接口介绍

IntersectionObserver API 是浏览器提供的一个用于异步观察目标元素与其祖先元素或视口（Viewport）交叉状态（即是否进入或离开视口）的接口。在 IntersectionObserver 出现之前，开发者通常需要通过监听 scroll 事件或使用…...

编程日记 2025/3/9 7:12:41

go并发学习笔记

包含了go学习笔记,含有channel的基础学习，编写数字的平方，如何成组的合并channel，如何优雅的关闭退出并发协程，通道阻塞情况分析，channel与哪些变成情况，可谓是收藏好文. 文章目录并发1：chann…...

编程日记 2025/3/9 7:11:40

DeepSeek V3 源码：从入门到放弃！

从入门到放弃花了几天时间，看懂了DeepSeek V3 源码的逻辑。源码的逻辑是不难的，但为什么模型结构需要这样设计，为什么参数需要这样设置呢？知其然，但不知其所以然。除了模型结构以外，模型的训练数据、训练…...

编程日记 2025/3/9 7:08:36

关于C++数据类型char的类型是整数的思考

学习数据类型时，整数类型中有一个特殊的类型char，可以使用字符来为其赋，也可以用整数来为其赋值，这是怎么一回事？其实任何类型，在计算机的内存中，在最小的存储单元比特中，内部只有0或…...

编程日记 2025/3/9 7:07:35

手写识别革命：Manus AI如何攻克多语言混合识别难题（二）

一、多语种特征分离：对抗训练与解耦表示 1. 梯度反转层（GRL）实现语言无关特征提取 class GradientReversalFn(Function):staticmethoddef forward(ctx, x, alpha):ctx.alpha alphareturn x.view_as(x)staticmethoddef backward(ctx, grad_…...

编程日记 2025/3/9 7:05:33

windows：curl: (60) schannel: SEC_E_UNTRUSTED_ROOT (0x80090325)

目录 1. git update-git-for-windows 报错2. 解决方案2.1. 更新 CA 证书库2.2. 使用 SSH 连接（推荐）2.3 禁用 SSL 验证（不推荐） 1. git update-git-for-windows 报错 LenovoLAPTOP-EQKBL89E MINGW64 /d/YHProjects/omni-channel-…...

编程日记 2025/3/9 7:03:31

typedef 和 using 有什么区别？

在 C 编程中，类型别名（Type Aliases）是为已有类型定义新名称的一种机制，能够显著提升代码的可读性和可维护性。C 提供了两种工具来实现这一功能：传统的 typedef 和 C11 引入的 using 关键字。概念类型别名本质上是为…...

编程日记 2025/3/9 7:02:29

【Java学习笔记】三、运算符，表达式、分支语句和循环语句

运算符与表达式算数运算符与算数表达式加减运算符操作数：2结合方向：从左到右优先级：4级乘（*）、除（/)和取余（%）运算符操作数：2结合方向：从左到右优先…...

编程日记 2025/3/9 7:01:28

广度优先遍历（BFS）：逐层探索的智慧

引言：什么是广度优先遍历？ 广度优先遍历（BFS）是一种用于遍历或搜索树（Tree）和图（Graph）结构的算法。其核心思想是逐层访问节点，先访问离起点最近的节点，再逐…...

编程日记 2025/3/9 6:59:26

【MySQL】第五节 - 事务实战详解：从基础到并发控制（附 Navicat 可运行实验脚本）

《MySQL 事务实战详解：从基础到并发控制（附 Navicat 可运行实验脚本）》为什么你必须掌握 MySQL 事务？ 在现代应用系统中，数据一致性是核心诉求。事务（Transaction） 是保证数据完整性的“黄金…...

编程新知 2026/4/1 1:11:03

【独家首发】基于eBPF+Java Agent+Istio Telemetry V2的零侵入式调试框架（已落地金融级生产环境，QPS＞50K场景验证）

第一章：零侵入式调试框架的演进逻辑与金融级落地价值传统调试方式依赖代码埋点、日志增强或代理注入，不仅增加系统耦合度，更在高敏感、强一致性的金融核心系统中引入不可控风险。零侵入式调试框架应运而生——它不修改业务字节码、不依赖特定…...

编程新知 2026/4/1 1:02:26

大多数人用AI还是“一次性聊天” Claude Cowork却让你把重复工作彻底扔上自动驾驶

花大价钱开了Claude Pro，每天扔进去一句“帮我写文案”“帮我优化内容”，结果用完就关窗口，下次还是从零开始？重复任务永远在偷走你的注意力，脑子里永远挂着“待办事项”这个隐形标签，效率看起来提升了&…...

编程新知 2026/4/1 0:58:20

汇川小型机 H5U编写程序设备采用回转hu小型机编写程序不含的硬件配置有ECT的总线

汇川小型机 H5U编写程序设备采用回转hu小型机编写程序不含的硬件配置有ECT的总线，包括汇川660系列伺服驱动器以及Io模块。设备程序分段明确采用梯形图编写更加方便，直观，易懂各个伺服轴密切配合，实现收放卷pid调节，以…...

编程新知 2026/3/31 23:35:00

如何避免开源项目集成版本管理中的3个常见陷阱？

如何避免开源项目集成版本管理中的3个常见陷阱？ 【免费下载链接】ha_xiaomi_home Xiaomi Home Integration for Home Assistant 项目地址: https://gitcode.com/GitHub_Trending/ha/ha_xiaomi_home 当你尝试将Xiaomi Home集成到Home Assistant时，…...

编程新知 2026/3/31 23:06:46

集成Touchgal与快马平台，高效开发移动端富交互图片浏览组件

集成Touchgal与快马平台，高效开发移动端富交互图片浏览组件最近在开发一个电商项目时，遇到了一个常见需求：商品详情页的图片浏览组件需要支持各种手势操作。传统的做法是从零开始编写手势识别逻辑，但这样不仅耗时，还…...

编程新知 2026/3/31 22:22:02

如何快速突破iOS限制：终极降级完全手册

如何快速突破iOS限制：终极降级完全手册【免费下载链接】downr1n downgrade tethered checkm8 idevices ios 14, 15. 项目地址: https://gitcode.com/gh_mirrors/do/downr1n 你是否曾想过让旧款iPhone重获新生？是否对苹果系统的版本限制感到困扰&…...

编程新知 2026/3/31 22:15:58

别再让AI单打独斗了：用MCP协议手把手教你搭建一个能‘对话’的智能体协作系统

从零构建智能体协作系统：基于MCP协议的周末旅行规划实战想象一下这样的场景：周五晚上，你对着手机说"帮我规划一个去杭州的周末旅行"，30秒后，一份完整的行程建议出现在屏幕上——包含根据实时天气推荐的穿搭…...

编程新知 2026/3/31 20:07:35

HiveWE：革新性地图编辑引擎助力魔兽争霸III创作者实现效率飞跃

HiveWE：革新性地图编辑引擎助力魔兽争霸III创作者实现效率飞跃【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 在魔兽争霸III地图开发领域，创作者长期面临着传统编辑器性能瓶颈与操作…...

编程新知 2026/3/31 19:47:29

iperf3网络性能测试工具完全指南：从安装到企业级应用

iperf3网络性能测试工具完全指南：从安装到企业级应用【免费下载链接】iperf3-win-builds iperf3 binaries for Windows. Benchmark your network limits. 项目地址: https://gitcode.com/gh_mirrors/ip/iperf3-win-builds 在当今数字化时代，网络…...

编程新知 2026/3/31 19:33:12

相关文章：