如何用HTML/CSS实现内部带图片的环形进度条

你原来的代码仅对整个边框元素做旋转变换，所以只会得到旋转的spinner效果，无法实现环形填充的进度效果。可以通过conic-gradient圆锥渐变属性来实现环形填充进度，修正后的代码如下：

完整CSS代码 #

.wrapper {
  width: 152px;
  height: 152px;
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 中间显示的图标，替换为你的本地图标路径即可 */
  background: url('./本地图标路径.png') center no-repeat;
  background-size: 50%;
}
/* 环形进度底色 */
.wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #f3f3f3;
  z-index: -2;
}
/* 环形进度填充层 */
.wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* 初始0%进度，渐变角度0 */
  background: conic-gradient(#21ac62 0%, transparent 0%);
  z-index: -1;
  animation: fill ease-in-out 3s forwards;
}
/* 中间挖空露出底色和图标 */
.loader {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  z-index: 0;
}

@keyframes fill{
  0% {
    background: conic-gradient(#21ac62 0%, transparent 0%);
  }
  100% {
    /* 这里100%对应360度填充，要实现其他进度对应修改百分比即可 */
    background: conic-gradient(#21ac62 100%, transparent 0%);
  }
}

完整HTML代码 #

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="./你的CSS文件路径.css">
</head>
<body>
  <div class="wrapper">
    <div class="loader"></div>
  </div>
</body>
</html>

如果需要自定义进度数值，只需要修改conic-gradient里第一个颜色的占比参数即可，比如75%进度就写conic-gradient(#21ac62 75%, transparent 0%)。

内容的提问来源于stack exchange，提问作者Elliot Anderson