CSS | 使用 SVG 和 CSS 创建加载动画

最新推荐文章于 2025-10-28 09:42:47 发布

原创最新推荐文章于 2025-10-28 09:42:47 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #css #css3

CSS 进阶之路专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用HTML的SVG元素和CSS动画技术来创建一个旋转圆环加载效果。关键在于CSS的stroke-dasharray属性，通过它来绘制圆环的间隙并实现动画的视觉效果。代码示例包括HTML结构和CSS样式，其中CSS部分详细说明了如何设置元素居中、定义圆环的样式以及为第二个圆环添加动画。

1 概述

先看一下效果：
在这里插入图片描述

2 代码实现

2.1 HTML

<div class="svg-loader">
    <svg class="svg-container" height="100" width="100" viewBox="0 0 100 100">
        <circle class="loader-svg bg" cx="50" cy="50" r="45"></circle>
        <circle class="loader-svg animate" cx="50" cy="50" r="45"></circle>
    </svg>
</div>

从上面的演示中可以明显看出，动画由两个圆组成，一个在另一个上面，第一个圆比第二个圆厚，两个圆都有相同的圆周，给人一种旋转的错觉。

圆圈内的 cx 和 cy 属性分别是两个圆圈的 x 轴和 y 轴坐标。它们确保两个圆的中心在同一个坐标上。

2.2 CSS

.svg-loader{
  display:flex;
  position: relative;
  align-content: space-around;
  justify-content: center;
}
.loader-svg{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  fill: none;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke: rgb(64, 0, 148);
}
.loader-svg.bg{
  stroke-width: 8px;
  stroke: rgb(207, 205, 245);
}

上面的 css 确保元素在容器中居中，以及两个圆圈有不同的笔画宽度和颜色。

然后，我们为第二个圆圈作动画：

.animate{
  stroke-dasharray: 242.6;
  animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
}

@keyframes fill-animation{
  0%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 141.3;
    stroke-dashoffset: 141.3;
  }
  100%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 282.6;
  }
}