Zero JS • Pure CSS Keyframes

CSS 加载动画演示实验室

基于现代 CSS 规范打造的 5 种高质感 Loading 动画,支持点击独立重新触发

三点波浪

01/05

采用 animation-delay 阶梯交错延迟与 translateY 位移,配合缓动曲线营造灵动波浪起伏感。

环形旋转

02/05

SVG 矢量圆环与 stroke-dashoffset 伸缩联动,双重 Keyframes 实现无缝平滑回旋。

进度条扫光

03/05

超宽 linear-gradient 背景结合 background-position 快速循环位移,呈现高光掠影质感。

方块折叠

04/05

三个方块依序执行 scaleY(0.12)scaleY(1) 压缩律动,赋予直观的节奏感。

环形进度

05/05

基于 stroke-dasharray 从 0% 增长至 75%,搭配 2.0s ease-out 缓动与数值淡入。