如何仅用HTML和SCSS/CSS复刻SVG stroke-dasharray环形加载器

当然可以！完全不用依赖SVG，纯CSS/SCSS就能做出你想要的那种经典环形加载动画，甚至还能通过变量轻松调整样式适配不同场景。下面我就给你拆解两种可行的实现思路，附上可直接复用的代码。

方法一：伪元素+旋转裁剪（兼容性友好） #

这种方法利用伪元素创建双层圆环，配合裁剪和旋转动画实现扫过效果，对旧浏览器的兼容性更好。

HTML结构（极简，无需额外元素） #

<div class="circle-loader"></div>

SCSS代码 #

// 自定义变量，方便快速调整样式
$loader-size: 60px;          // 加载器整体大小
$loader-thickness: 8px;      // 环形边框粗细
$loader-bg-color: #e0e0e0;   // 背景圆环颜色
$loader-progress-color: #2196f3; // 进度环颜色
$loader-animation-speed: 1.5s;   // 动画周期

.circle-loader {
  position: relative;
  width: $loader-size;
  height: $loader-size;
  border-radius: 50%;
  overflow: hidden; // 裁剪超出容器的部分

  // 背景圆环
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: $loader-thickness solid $loader-bg-color;
  }

  // 旋转的进度圆环
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: $loader-thickness solid $loader-progress-color;
    // 裁剪出左半环，旋转时就会形成扫过效果
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    animation: rotate-loader $loader-animation-speed linear infinite;
  }
}

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

原理说明 #

• 用:before伪元素绘制灰色背景环，:after伪元素绘制彩色进度环
• 通过clip-path裁剪进度环只显示左半部分，再给它添加无限旋转动画，视觉上就会形成环形扫过的效果，和SVG的stroke-dasharray动画逻辑类似

方法二：锥形渐变+遮罩（代码更简洁） #

这种方法利用CSS锥形渐变和遮罩特性，代码更短，实现起来更高效，适合现代浏览器环境。

SCSS代码 #

// 同样支持自定义变量调整
$loader-size: 60px;
$loader-thickness: 8px;
$loader-bg-color: #e0e0e0;
$loader-progress-color: #2196f3;
$loader-animation-speed: 1.5s;

.circle-loader {
  width: $loader-size;
  height: $loader-size;
  border-radius: 50%;
  // 用锥形渐变创建彩色扇形，通过动画改变渐变角度
  background: conic-gradient($loader-progress-color 0deg, transparent 0deg);
  // 用遮罩挖空中间部分，只留下环形边框（模拟SVG的stroke效果）
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - #{$loader-thickness}),
    black calc(100% - #{$loader-thickness} + 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - #{$loader-thickness}),
    black calc(100% - #{$loader-thickness} + 1px)
  );
  animation: conic-rotate $loader-animation-speed linear infinite;
}

@keyframes conic-rotate {
  from {
    background: conic-gradient($loader-progress-color 0deg, transparent 0deg);
  }
  to {
    background: conic-gradient($loader-progress-color 360deg, transparent 360deg);
  }
}

原理说明 #

• conic-gradient创建随角度变化的彩色扇形，动画过程中不断调整扇形的结束角度，实现扫过效果
• mask属性通过径向渐变把加载器中间的圆形区域遮罩掉，只保留外层的环形边框，完美模拟SVG的描边效果

自定义技巧 #

你可以通过修改开头的SCSS变量快速调整：

• 调整$loader-size改变加载器整体大小
• 修改$loader-thickness控制环形边框的粗细
• 更换$loader-progress-color和$loader-bg-color自定义配色
• 调整$loader-animation-speed改变动画的快慢

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