当前位置：首页 > CSS

loading css 制作

2026-01-28 00:51:05CSS

加载动画的 CSS 实现方法

使用纯 CSS 创建旋转加载动画
通过 @keyframes 定义旋转动画，结合 border 属性模拟加载图标：

.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: #555;
  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: 200px;
  height: 4px;
  background: #e0e0e0;
  position: relative;
  overflow: hidden;
}
.progress-loader::before {
  content: '';
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: #4285f4;
  animation: progress 2s linear infinite;
}
@keyframes progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

SVG 路径动画
使用 SVG 结合 CSS 实现更复杂的路径绘制效果：

<div class="svg-loader">
  <svg viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" fill="none" stroke="#ddd" stroke-width="4"/>
    <circle cx="25" cy="25" r="20" fill="none" stroke="#4285f4" stroke-width="4" 
            stroke-dasharray="80 30" stroke-linecap="round" transform="rotate(-90 25 25)">
      <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"/>
    </circle>
  </svg>
</div>

实用优化技巧