css如何制作加载

2026-03-11 20:40:15CSS

使用纯CSS制作加载动画

通过CSS的@keyframes和动画属性可以创建多种加载效果。以下是一个旋转圆点的经典加载动画实现：

css如何制作加载

<div class="loader"></div>

.loader {
  width: 48px;
  height: 48px;
  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); }
}

点状加载动画实现

创建三个跳动的圆点作为加载指示器：

css如何制作加载

<div class="dot-loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

.dot-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

进度条加载效果

创建水平进度条动画：

<div class="progress-loader">
  <div class="progress-bar"></div>
</div>

.progress-loader {
  width: 100%;
  height: 4px;
  background-color: #f3f3f3;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 50%;
  background-color: #3498db;
  animation: progress 2s ease-in-out infinite;
}

@keyframes progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

骨架屏加载效果

为内容未加载时提供占位效果：

<div class="skeleton-loader">
  <div class="skeleton-line"></div>
  <div class="skeleton-line shorter"></div>
</div>

.skeleton-loader {
  width: 100%;
}

.skeleton-line {
  height: 12px;
  background-color: #e0e0e0;
  margin-bottom: 10px;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-line.shorter {
  width: 70%;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

这些CSS加载动画可以根据实际需求调整颜色、尺寸和动画时间。所有示例都只使用CSS实现，无需JavaScript，适合各种现代浏览器。