当前位置：首页 > CSS

loading css 制作

2026-04-01 03:22:05CSS

使用 CSS 制作加载动画

加载动画（Loading）可以通过 CSS 的动画特性实现，以下是一些常见的方法和示例代码。

旋转加载动画

通过 @keyframes 和 transform 实现一个简单的旋转效果：

.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: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot-loader div:nth-child(1) { animation-delay: -0.32s; }
.dot-loader div:nth-child(2) { animation-delay: -0.16s; }

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

进度条加载动画

通过 width 属性的动画实现进度条效果：

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

.progress-loader::after {
  content: '';
  display: block;
  width: 20%;
  height: 100%;
  background-color: #3498db;
  animation: progress 2s linear infinite;
}

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

自定义 SVG 加载动画

使用 SVG 和 CSS 结合实现更复杂的加载效果：

.svg-loader {
  width: 50px;
  height: 50px;
  animation: rotate 2s linear infinite;
}

.svg-loader circle {
  stroke: #3498db;
  stroke-width: 4;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

@keyframes dash {
  0% { stroke-dashoffset: 80; }
  50% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 80; }
}

渐变背景加载动画

通过背景渐变和动画实现动态背景效果：

.gradient-loader {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #3498db, #e74c3c, #f1c40f);
  background-size: 200% 200%;
  animation: gradient 2s ease infinite;
  border-radius: 8px;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}