下面是通过css实现的分段加载环的代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>分段环形头像进度条</title>
<style>
:root{
--bg:#0d1b3d;
}
body{
margin:0;
min-height:100vh;
background:var(--bg);
display:grid;
grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
gap:22px;
place-items:center;
padding:28px;
}
/* 通用环形进度条 */
.progress {
/* 可调参数 */
--size: 120px; /* 外圈尺寸 */
--thickness: 16px; /* 圈厚度，配合内圈挖空 */
--segments: 24; /* 一圈多少格 */
--gap: 3deg; /* 每格之间的角度缝隙 */
--active-color: #00eaff; /* 点亮颜色 */
--inactive-color:#2f3d61; /* 未点亮颜色 */
--percent: 68; /* 0 ~ 100 */
/* 计算每格宽度（角度） */
--step: calc(360deg / var(--segments));
--fill: calc(var(--step) - var(--gap));
width: var(--size);
height: var(--size);
border-radius: 50%;
position: relative;
/* 背景画出“未点亮”的分段格子环 */
background:
repeating-conic-gradient(
var(--inactive-color) 0 var(--fill),
transparent var(--fill) var(--step)
);
}
/* 点亮进度：用 conic-gradient 画扇形，再用 repeating-conic-gradient 做“格子”遮罩 */
.progress::before{
content:"";
position:absolute; inset:0; border-radius:50%;
background:
conic-gradient(
var(--active-color) 0deg calc(var(--percent) * 1%),
transparent 0
);
/* 把进度限制在格子里 */
mask:
repeating-conic-gradient(#000 0 var(--fill), transparent var(--fill) var(--step));
-webkit-mask:
repeating-conic-gradient(#000 0 var(--fill), transparent var(--fill) var(--step));
}
/* 挖空中间，得到环形厚度 */
.progress::after{
content:"";
position:absolute;
inset: calc(var(--thickness));
background:#fff;
border-radius:50%;
}
/* 头像 */
.avatar{
position:absolute;
inset: calc(var(--thickness) + 6px); /* 留一点边距 */
border-radius:50%;
overflow:hidden;
z-index:1;
box-shadow:0 2px 8px rgba(0,0,0,.25) inset;
}
.avatar img{
width:100%; height:100%; object-fit:cover; display:block;
}
/* （可选）外描边圈，接近你截图的质感 */
.ring{
position:absolute; inset:0; border-radius:50%;
box-shadow:0 0 0 2px rgba(255,255,255,.08) inset,
0 0 0 6px rgba(0,0,0,.25) inset;
pointer-events:none;
}
</style>
</head>
<body>
<!-- 调整 --percent / --segments / --gap 即可 -->
<div class="progress" style="--percent:75; --segments:28; --gap:3deg;">
<span class="ring"></span>
<div class="avatar">
<img src="https://i.pravatar.cc/160?img=5" alt="">
</div>
</div>
<div class="progress" style="--percent:32; --segments:24; --gap:4deg; --active-color:#6cf88a;">
<span class="ring"></span>
<div class="avatar">
<img src="https://i.pravatar.cc/160?img=10" alt="">
</div>
</div>
<div class="progress" style="--percent:92; --segments:20; --gap:5deg; --active-color:#ffd34d;">
<span class="ring"></span>
<div class="avatar">
<img src="https://i.pravatar.cc/160?img=15" alt="">
</div>
</div>
<div class="progress" style="--percent:15; --segments:36; --gap:2deg; --active-color:#8ea6ff;">
<span class="ring"></span>
<div class="avatar">
<img src="https://i.pravatar.cc/160?img=25" alt="">
</div>
</div>
</body>
</html>
