在日常开发中，Loading 动画及加载进度应该是使用最广泛的。实现它们的方案很多，包括Gif图、CSS动画、APNG、Lottie等。本文将介绍一种使用 CSS 自定义属性 @property、conic-gradient()、offset-path 以及表情符号实现的路径动画。
1.核心知识点介绍
1.1.@property
引用 MDN 的定义：
@property CSS at-rule是CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码。有效的 @property 规则会注册一个自定义属性，就像 CSS.registerProperty (en-US) 函数被使用同样的参数调用了一样。
基础语法：
@property --property-name {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
浏览器兼容性：
1.2.conic-gradient()
conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮 (en-US)
conic-gradient() 即锥形渐变，它由起始角度、中心位置、角渐变断点三个部分组成，其中起始角度和中心位置都是可以省略的。
基础语法：
conic-gradient( [ from ]? [ at ]?, ) 浏览器兼容性：
conic-gradient() 已经被所有现代浏览器所支持。
1.3.offset-path
offset 常见属性：
- offset-distance：指定元素沿 offset-path 路径运动的距离，可以是数值或者百分比单位，100% 则表示把所有的路径都跑完了。
- offset-position：定义元素的 offset-path 初始位置，类似于属性 background-position。
- offset-anchor：指定 offset-path 路径框内的原点，其属性值和 transform-origin 类似。
- offset-rotate：定义元素沿 offset-path 路径的角度，默认是 auto，表示自动计算当前路径的切线方向，并朝着这个方向前进。
path 的路径参数:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath浏览器兼容性：
offset: path() 也已被所有现代浏览器所支持。
2.实现方案
2.1.创建页面框架
使用 html:5 和 div.circle>div.indicator 快速创建页面框架。
2.2.增加基础样式
使用 conic-gradient() 增加背景色，使用伪元素 ::before 增加了圆环效果，同时给 .indicator 元素增加了 offset 路径，并设置 --size: min-content 以适应内容大小。
:root {
--size: 200px;
--p: 10%;
}
@property --p {
syntax: '';
inherits: false;
initial-value: 10%;
}
body {
display: grid;
place-items: center;
}
.circle {
position: relative;
width: var(--size);
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient( red calc(-60% + var(--p)), rgb(224, 187, 77) var(--p), #eee 0);
cursor: progress;
.indicator {
--size: min-content;
width: var(--size);
aspect-ratio: 1;
offset: path("M 100,0 a 100 100 0 1 1 -.1 0 z");
offset-distance: var(--p);
font: 43pt serif;
transform: rotateY(180deg) translateX(-6px);
}
&::before {
position: absolute;
inset: 20px;
content: '::before';
text-align: center;
line-height: 160px;
border-radius: inherit;
background: #fff;
}
} 效果如下：
2.3.增加动画样式
动画实现主要依赖 --p 属性的变化，记得使用 @property 来定义。
.circle {
animation: offsetDis 2s linear infinite;
.indicator {
animation: offsetDis 2s linear infinite;
}
}