css loading制作

CSS Loading动画制作方法

使用纯CSS可以创建多种加载动画效果，以下是几种常见的实现方式：

旋转圆圈动画 通过border属性和关键帧动画实现经典旋转效果：

.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;
  justify-content: center;
  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%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

进度条加载动画 创建水平移动的进度条效果：

.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: #4285f4;
  animation: progress 2s linear infinite;
}
@keyframes progress {
  to {
    left: 100%;
  }
}

自定义SVG加载动画 结合SVG和CSS动画：

.svg-loader {
  width: 60px;
  height: 60px;
  animation: rotate 2s linear infinite;
}
.svg-loader circle {
  stroke: #ccc;
  stroke-width: 4;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

性能优化建议

• 使用transform和opacity属性触发GPU加速
• 限制动画复杂度，避免过多DOM元素参与动画
• 使用will-change属性预提示浏览器
• 对移动设备考虑减少动画持续时间

响应式处理技巧

通过媒体查询调整加载动画尺寸：

@media (max-width: 600px) {
  .loader {
    width: 30px;
    height: 30px;
    border-width: 3px;
  }
}

这些方法可以根据实际需求组合使用或修改参数，CSS加载动画的优势在于轻量级、无依赖性和高性能表现。