css loading制作
CSS Loading动画制作方法
通过CSS可以创建多种加载动画效果，以下是几种常见实现方式：
旋转动画
使用@keyframes创建旋转效果，适合圆形加载指示器：
.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(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: #e0e0e0;
position: relative;
overflow: hidden;
}
.progress-loader::before {
content: '';
position: absolute;
left: -50%;
width: 50%;
height: 100%;
background: #3498db;
animation: progress 2s linear infinite;
}
@keyframes progress {
to {
left: 100%;
}
}骨架屏加载
创建内容加载前的占位效果：
.skeleton-loader {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}实现要点
- 使用
animation属性控制动画持续时间、缓动函数和循环次数 transform属性可实现缩放、旋转等效果- 通过
animation-delay实现交错动画效果 - 考虑添加
prefers-reduced-motion媒体查询为运动敏感用户提供替代方案
这些方法可根据实际需求组合修改，通过调整颜色、尺寸和时间参数可定制不同风格的加载效果。
