在日常开发中，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: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

浏览器兼容性：

1.2.conic-gradient()

conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮 (en-US)

conic-gradient() 即锥形渐变，它由起始角度、中心位置、角渐变断点三个部分组成，其中起始角度和中心位置都是可以省略的。

基础语法：

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

浏览器兼容性：

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: '<percentage>';
  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;
  }
}

3.效果预览