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

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

article 2025/3/12 14:33:40

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

<!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>