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 文件使用，需根据实际场景调整颜色、尺寸和动画时长参数。