可通过CSS实现五种加载动画：一、@keyframes旋转环；二、border-radius+透明边框脉冲圆点；三、SVG路径描边动画；四、骨架屏占位方案；五、CSS变量动态控制动画参数。
如果您希望在HTML5页面中添加加载动画，以提升用户等待体验并避免页面空白，可以通过CSS实现轻量级、高性能的动画效果。以下是多种实现方法：
一、使用CSS @keyframes创建旋转动画
该方法通过定义关键帧动画，驱动一个块级元素（如div）持续旋转，模拟传统loading图标。动画完全由CSS控制，无需JavaScript，兼容性良好且渲染效率高。
1、在HTML中插入一个空的容器元素，例如：<div class="loader"></div>。
2、在CSS中定义.loader类，并设置宽高、边框样式及圆角，使其呈现为环形结构。
立即学习“前端免费学习笔记（深入）”；
3、使用@keyframes spin定义从0deg到360deg的旋转动画。
4、将动画应用至.loader，设置animation: spin 1s linear infinite，确保其匀速无限循环。
5、为提升性能，添加transform: translateZ(0)或will-change: transform，强制启用GPU加速。
二、利用border-radius与透明边框制作脉冲圆点
该方法通过叠加多个具有不同透明度和缩放比例的圆形元素，配合延迟动画，形成呼吸式脉冲效果。视觉层次丰富，适合轻量级欢迎页或API请求等待状态。
1、在HTML中创建三个相同class的<span>标签，例如：<span class="pulse-dot"></span>，共三个。
2、为每个.pulse-dot设置display: inline-block、width和height均为12px、border-radius: 50%，并设初始background-color为#4a90e2。
3、定义@keyframes pulse，使transform: scale()在0.3与1.0之间变化，同时opacity从0.8降至0.0再回升。
4、分别为三个点设置animation属性，保持相同持续时间但animation-delay依次为0s、0.2s、0.4s。
5、确保父容器设置text-align: center，使三点水平居中排列。
三、SVG内联路径动画实现进度指示器
该方法借助SVG的<path>元素与stroke-dasharray、stroke-dashoffset属性，精确控制描边绘制节奏，适用于需反馈具体加载阶段的场景（如资源预加载）。
1、在HTML中嵌入内联SVG，包含一个<path>，其d属性定义为圆形路径或自定义形状路径。
2、为<path>设置stroke颜色、stroke-width及fill: none，确保仅显示描边。
3、计算路径总长度，使用JavaScript调用getTotalLength()获取数值，并设为stroke-dasharray与初始stroke-dashoffset值。
4、在CSS中定义@keyframes draw，使stroke-dashoffset从全长线性减至0。
5、将动画绑定至<path>，时长设为2s，并添加animation-fill-mode: forwards以维持最终状态。
四、纯CSS骨架屏（Skeleton Screen）占位方案
该方法不依赖旋转或缩放，而是通过灰色块与模拟文本行构成静态结构轮廓，在真实内容加载完成前占据布局空间，显著降低用户感知延迟，符合现代Web性能最佳实践。
1、为待加载区域（如文章卡片、头像、标题栏）分别添加带有class="skeleton"的空<div>元素。
2、为.skeleton设置固定宽高、background-color: #f0f0f0及border-radius: 4px，模拟内容区块外形。
3、对模拟文字行，额外添加::after伪元素，设置content: ""、display: block、height: 16px及width: 70%等属性。
4、使用animation: shimmer 1.5s infinite，其中@keyframes shimmer定义从左至右的线性渐变背景位移效果，色值范围为#f0f0f0到#e0e0e0再到#f0f0f0。
5、当真实内容加载完毕，通过JavaScript移除所有skeleton类，并显示对应data-loaded内容容器。
五、CSS变量动态控制动画速度与主题色
该方法利用CSS自定义属性实现加载动画的运行时配置，支持根据网络状态、设备性能或用户偏好实时调整动画节奏与视觉风格，提升可维护性与适配灵活性。
1、在:root中声明--loader-speed: 1.2s、--loader-color: #3498db、--loader-size: 24px等变量。
2、在.loader类中使用animation-duration: var(--loader-speed)、border-color: var(--loader-color)等引用方式。
3、通过JavaScript动态修改document.documentElement.style.setProperty()，例如将--loader-speed设为"0.8s"以响应“快速模式”开关。
4、为适配深色模式，可在@media (prefers-color-scheme: dark)中重置--loader-color为#5dade2。
5、确保所有动画属性均使用var()引用，避免硬编码值，便于全局统一调整。
