loading css 制作
加载动画的 CSS 实现方法
纯 CSS 旋转动画
通过 @keyframes 和 transform 属性创建无限旋转效果：
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}点状加载动画 使用伪元素创建三个跳动圆点：
.dot-loader {
display: flex;
gap: 8px;
}
.dot-loader div {
width: 12px;
height: 12px;
background: #333;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.dot-loader div:nth-child(2) {
animation-delay: 0.2s;
}
.dot-loader div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}进度条式加载动画 线性进度条效果：
.progress-loader {
width: 100%;
height: 4px;
background: #eee;
position: relative;
overflow: hidden;
}
.progress-loader::before {
content: "";
position: absolute;
left: -50%;
width: 40%;
height: 100%;
background: #4285f4;
animation: progress 2s linear infinite;
}
@keyframes progress {
to { left: 150%; }
}骨架屏加载效果 内容加载前的占位效果：
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
to { background-position: -200% 0; }
}实现注意事项
- 使用
prefers-reduced-motion媒体查询为运动敏感用户提供替代方案 - 通过
will-change: transform优化动画性能 - 考虑使用
vh/vw单位确保响应式显示 - 对于复杂动画可结合 SVG 和 CSS 实现
以上代码可直接插入 HTML 的 <style> 标签或外部 CSS 文件使用，需根据实际场景调整颜色、尺寸和动画时长参数。
