css制作加载效果
使用CSS制作加载效果
旋转加载动画
通过CSS的@keyframes和transform属性实现旋转效果：
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px 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: #3498db;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.dot-loader div:nth-child(1) { animation-delay: -0.32s; }
.dot-loader div:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}进度条加载效果
通过宽度变化模拟进度加载：
.progress-bar {
height: 4px;
width: 100%;
background: #e0e0e0;
overflow: hidden;
}
.progress-bar::before {
content: "";
display: block;
height: 100%;
width: 50%;
background: #3498db;
animation: progress 2s linear infinite;
}
@keyframes progress {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}骨架屏加载效果
为内容未加载时提供占位效果：
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}脉冲效果加载动画
创建元素尺寸的周期性变化：
.pulse-loader {
width: 30px;
height: 30px;
background: #3498db;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(0.8); opacity: 0.5; }
}实现注意事项
- 所有动画应设置适当的
animation-iteration-count或保持infinite - 使用
prefers-reduced-motion媒体查询为运动敏感用户提供替代方案 - 通过
opacity和visibility控制加载元素的显示状态切换 - 考虑使用CSS变量（如
--loader-color）便于主题定制
性能优化建议
- 优先使用
transform和opacity属性触发GPU加速 - 避免过多同时运行的复杂动画
- 对移动设备减少动画元素数量
- 使用
will-change属性对高频动画元素进行提示
这些效果可通过组合和调整参数衍生出多种变体，实际应用时需根据具体场景选择合适类型。
