打造炫酷 CSS 加载中样式，提升用户体验

今天 5391阅读

在 Web 开发中，加载中样式是一个不可或缺的元素。当网页需要一定时间来加载资源时，如果没有恰当的加载中样式，用户可能会感到困惑，甚至认为网页出现了问题。CSS 作为前端开发的重要组成部分，能够帮助我们轻松创建出各种美观、炫酷的加载中样式。本文将介绍几种常见的 CSS 加载中样式的实现方法。

基础圆形加载中样式

原理与思路

基础圆形加载中样式是最常见的一种，其核心原理是利用 CSS 的 border 属性创建一个圆形，再通过 border-top 属性设置不同颜色，最后使用 animation 实现旋转动画。

代码实现

/* 定义加载中容器的样式 */
.loader {
  border: 16px solid #f3f3f3; /* 灰色边框 */
  border-top: 16px solid #3498db; /* 蓝色顶部边框 */
  border-radius: 50%; /* 使容器成为圆形 */
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* 应用旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>基础圆形加载中样式</title>
</head>
<body>
  <div class="loader"></div>
</body>
</html>

代码解释

在上述代码中，.loader 类定义了加载中容器的样式，通过 border 和 border-top 创建了圆形和不同颜色的顶部边框。border-radius: 50% 使容器成为圆形。animation 属性应用了名为 spin 的动画，该动画在 2s 内线性旋转 360deg，并且无限循环。

波浪加载中样式

原理与思路

波浪加载中样式通过创建多个圆形元素，利用 animation 实现不同的动画延迟，从而模拟出波浪的效果。

代码实现

.wave-loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wave-loader div {
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
  margin: 0 5px;
  animation: wave 1.2s linear infinite;
}

.wave-loader div:nth-child(2) {
  animation-delay: -1.1s;
}

.wave-loader div:nth-child(3) {
  animation-delay: -1s;
}

@keyframes wave {
  0%, 40%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-20px);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>波浪加载中样式</title>
</head>
<body>
  <div class="wave-loader">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

代码解释

.wave-loader 类使用 flexbox 布局将子元素居中显示。每个子元素是一个蓝色的圆形，通过 animation 属性应用 wave 动画。nth-child 选择器为不同的子元素设置了不同的动画延迟，从而实现波浪效果。wave 动画在 0%、40% 和 100% 时元素位置不变，在 20% 时元素向上移动 20px。

环形进度加载中样式

原理与思路

环形进度加载中样式通过创建两个圆形元素，一个作为背景，一个作为进度条，利用 stroke-dasharray 和 stroke-dashoffset 属性控制进度条的显示，再通过 animation 实现进度条的动画效果。

代码实现

<svg class="circular-loader" viewBox="25 25 50 50">
  <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>

.circular-loader {
  animation: rotate 2s linear infinite;
  transform-origin: center center;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #3498db;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

代码解释

circular-loader 类应用了 rotate 动画，使整个 SVG 元素旋转。.path 类通过 stroke-dasharray 和 stroke-dashoffset 属性控制进度条的显示，dash 动画改变这两个属性的值，从而实现进度条的动画效果。

总结与建议

通过以上几种常见的 CSS 加载中样式的实现方法，我们可以看到 CSS 在创建加载中样式方面具有强大的能力。在实际开发中，我们可以根据项目的风格和需求选择合适的加载中样式。同时，为了提升用户体验，我们可以对加载中样式进行更多的创意设计，如添加渐变效果、阴影效果等。另外，要注意加载中样式的性能，避免使用过于复杂的动画导致页面性能下降。希望本文能帮助你打造出更加炫酷的 CSS 加载中样式，提升用户在等待页面加载时的体验。