本文在Akiar的基础上进行自定义加载动画的实现，在操作之前，应确保你已经阅读过原文链接：

Loading Animation

https://akilar.top/posts/3d221bf2/

上述链接给出的教程是针对一个已经写好的.styl文件，但更多的动画是.css格式，因此本文介绍加载.css格式的动画方法。

[CodeOpen]提供了很多已有的动画案例，并且能在其上以.pug形式、.styl格式调试（通过齿轮图标进行设置）。将该网站上现有的CSS格式文件导出后，可以用 stylus 转换（参考[stylus基础教程]。具体语法如下：

1
2
3
npm i stylus@latest -g
stylus -C assets/css/index.css  # 将assets/css/index.css 编译成assets/css/index.styl
stylus -c assets/css/index.styl assets/css/index.css  # 将.styl转换成.css

将HTML转换为.pug在[Loading Animation]中有介绍，剩余的操作流程与该链接中的一致。