互动式指导开发 SVG 加载旋转器

SVG 旋转器：你一定见过它，在加载元素或获取数据时为我们提供视觉提示。它们实用、可扩展，并能增强用户体验。本指南将指导您如何仅使用一些简单的 SVG 属性（如 stroke-dasharray 和 stroke-dashoffset）来实现它们。

✨🔗 要深入了解不同的 SVG 属性，请查阅 SVG 参考资料。

画圆

我们首先要定义工作区。viewBox 属性控制坐标系。这里，0 0 800 800 将原点设置在左上角，宽度和高度各为 800 个单位。

然后，我们创建一个circle 元素。cx 和 cy 属性将圆心定位在 x 轴和 y 轴的 400 个单位处。半径 (r) 为 200 个单位，笔画宽度为 40 个单位，使其看起来更加粗犷。fill="none "可确保圆形是空心的，从而形成旋转器的基本形状。

颜色:

`stroke-dasharray` 使圆不完整

stroke-dasharray 是一个功能强大的属性，可以控制形状笔画中的破折号和间隙模式。

例如，600 200 的值表示 600 个单位的破折号和 200 个单位的间隙。可以提供 2 个以上的值。600 200 400 100 表示由 600 个单位的破折号、200 个单位的间距、400 个单位的破折号和 100 个单位的间距组成的图案。破折号和间隙图案重复出现，以填满整个形状的笔画长度。

在下面的示例中，我们为间距设置了一个较大的值，以确保只显示一个破折号。当破折号的值为 0 时，我们看不到任何东西（间隙占据了所有可见的笔画），而当值为 1257 时（半径为 200），我们又看到了一个完整的圆。这是因为圆周率的计算公式是 2 * π * 半径 (2 * 3.1416 * 200 = 1,256.64)

stroke-linecap 控制圆线帽

圆形(round )线帽使线段末端更加圆滑：

stroke-dashoffset 控制线段的起点

通过 stroke-dashoffset 属性，我们可以偏移破折号的起点：

使用 CSS 旋转圆圈

只需一个简单的 CSS 动画，就能让我们的圆围绕中心不断旋转：

Easing:

制作stroke-dasharray动画

我们还可以将stroke-dasharray 属性的值制成动画：