当前位置：首页 > CSS

css制作加载动画

2026-03-12 06:34:47CSS

使用CSS制作加载动画

CSS加载动画可以通过关键帧动画（@keyframes）和简单的HTML元素实现。以下是几种常见的方法：

旋转动画

通过旋转一个元素实现加载效果：

css制作加载动画

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

.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); }
}

点状加载动画

使用多个点通过动画形成加载效果：

css制作加载动画

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

.dot-loader {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 15px;
  height: 15px;
  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%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

进度条加载动画

创建一个从左到右填充的进度条：

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

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

.progress-bar {
  height: 100%;
  width: 0;
  background-color: #3498db;
  animation: progress 2s linear infinite;
}

@keyframes progress {
  0% { width: 0; margin-left: 0; }
  50% { width: 50%; margin-left: 25%; }
  100% { width: 0; margin-left: 100%; }
}

脉冲效果加载动画

通过缩放实现脉冲效果：

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

.pulse-loader {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.7; }
}