Typecho 后台默认的载动 loading 转圈，其实挺敷衍的载动。就是载动一个 CSS 动画，转得没精打采，载动像老式洗衣机脱水时卡了根袜子。载动我盯了它三年，载动终于在某次等页面刷新的载动间隙里动了手——反正闲着也是闲着。

先拆开看它到底怎么转的载动。Typecho 的载动加载动画藏在 `admin/common.js` 里，核心就一个 `showLoading()` 函数，载动往页面塞个 `div.loading`，载动背景半透明，载动中间放个旋转的载动圆圈。那个圆圈用的载动是 `border` 画出来的，四个边框三个透明一个实色，载动再转起来。原理不复杂，但效果糙得很——圆环粗细不均，旋转速度还带轻微卡顿，因为没开 GPU 加速。

我换了思路，不折腾 CSS 旋转了。直接改成 SVG 描边动画，用 `stroke-dasharray` 控制线条的虚实长度，让它像呼吸一样伸缩。代码就几行：

<svg viewBox="0 0 50 50"> <circle cx="25" cy="25" r="20" fill="none" stroke="#467b96" stroke-width="4" stroke-linecap="round" stroke-dasharray="80 140"> <animate attributeName="stroke-dashoffset" from="220" to="0" dur="1.2s" repeatCount="indefinite"/> </circle> </svg>

效果立竿见影。线条不再是死板地绕圈，而是像墨水在纸上洇开一样，拉长、缩短、再拉长。配上 Typecho 默认的灰白背景，反而有点日式枯山水的味道。我把这段替换进 `common.js`，顺手把原来的 `div.loading` 删了，改成直接插入 SVG 节点。

但这里有个坑。Typecho 的加载动画不止用在后台切换页面，还用于发布文章时的提交反馈。那个场景下，用户点完“发布”按钮，页面会锁住，然后显示 loading。原来那个转圈虽然丑，但胜在显眼——半透明遮罩加旋转圆环，用户一眼就知道“在提交”。我换成 SVG 后，线条太细太素，遮罩又没改，结果有次测试发布，自己都愣了两秒才反应过来“哦，它在加载”。

所以后来我把 SVG 尺寸放大了 1.5 倍，又给它外面包了一层浅色圆环做衬底。这样既有细腻的描边呼吸感，又保留了足够的视觉重量。代码里加了个 `` 当背景环，透明度设成 0.2，不抢戏，但能撑住场子。

顺带说一句，Typecho 的 loading 动画其实还有个隐藏问题——它不防抖。如果你快速连续点击导航菜单，`showLoading()` 会重复插入多个遮罩层，叠在一起，背景越来越深。我加了句判断，如果页面里已经有 `.loading-mask`，就先移除再重新插入。这不算什么高深技巧，但能省掉不少用户困惑。

改完这些，后台看起来终于像个 2024 年的产品了。加载动画这东西，平时没人注意，但一旦卡顿，它就变成用户盯着看的唯一焦点。与其让那个转圈暴露 Typecho 的老态，不如花十分钟让它体面点。反正代码量不大，唯一要小心的就是别把 `common.js` 里其他函数给碰坏了——我建议你改之前先备份一份，别问我怎么知道的。