如何将沿实心圆边框旋转的CSS圆形加载器前缘改为半月形？

我帮你调整了代码，把原来的圆形加载器前缘改成了半月形，具体方案如下：

实现思路 #

原来的加载器依靠边框旋转展示加载状态，我们可以通过伪元素创建半月形，并调整旋转原点，让它沿着外圆边框内侧旋转，同时配合外圆的overflow:hidden保证视觉完整性。

修改后的完整CSS代码 #

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%;
  overflow: hidden; /* 隐藏超出外圆的部分 */
}

.spinner {
  position: relative;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  animation: rotate 5s linear infinite;
}

.spinner::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 360px;
  height: 360px;
  background-color: #4a90e2; /* 可根据需求修改半月形颜色 */
  border-radius: 50% 0 0 50%; /* 生成左半月形 */
  transform-origin: center right; /* 以右侧中心为旋转原点，贴合外圆边框 */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

关键改动说明 #

• 外圆容器优化：给.outer-circle添加overflow:hidden，确保旋转的半月形不会超出外圆边界，让视觉效果更规整。
• 伪元素创建半月形：通过::before伪元素生成左半圆（border-radius: 50% 0 0 50%），尺寸设置为和外圆整体（内容+边框）一致的360px，刚好贴合外圆边框。
• 旋转原点调整：给伪元素设置transform-origin: center right，让它以自身右侧中心为旋转点，这样旋转时会沿着外圆的边框内侧运动，完美模拟“沿边框旋转的半月形前缘”效果。
• 动画同步：保持原有的rotate动画，让.spinner带动伪元素一起旋转，实现无限循环的加载动画。

你可以根据需求调整半月形的颜色、动画时长，或者修改border-radius为0 50% 50% 0来生成右半月形。

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