当前位置：首页 > CSS

css制作加载效果

2026-04-01 22:50:33CSS

CSS 加载动画实现方法

旋转加载动画
通过 @keyframes 定义旋转动画，结合 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); }
}

进度条加载动画
使用 linear-gradient 和动画实现进度条效果：

.progress-bar {
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #3498db 0%, #3498db 50%, transparent 50%);
  background-size: 200% 100%;
  animation: progress 2s linear infinite;
}
@keyframes progress {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

点状加载动画
通过伪元素和延迟动画创建多点闪烁效果：

.dot-loader {
  display: flex;
  gap: 8px;
}
.dot-loader div {
  width: 12px;
  height: 12px;
  background: #3498db;
  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); }
}

骨架屏加载效果
模拟内容加载前的占位样式：

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

关键优化点

css制作加载效果