让等待不再乏味：编写一个优雅的加载动画

2023-12-23 18:04:13

我们经常在进行某个操作时，等待服务器响应。这些等待时刻会让人感到焦虑和不安。为了缓解这种情绪，在合理的时间内，提供合理的反馈，让用户知道他们的操作已收到回应，非常重要。一个优雅的加载动画可以将等待过程变为有趣而愉快的体验，让用户在享受等待的同时放松身心。

加载动画的类型

加载动画有多种类型，每种类型都有自己独特的优点和缺点。最常见的类型包括：

进度条： 进度条显示操作的完成程度，通常使用水平或垂直条形图表示。
旋转指示器： 旋转指示器是圆形图标，在加载过程中不断旋转。
跳动动画： 跳动动画由一系列连续的小动画组成，例如跳动的点或脉动的光圈。
骨架屏： 骨架屏在页面加载时显示内容的占位符，然后在内容加载后逐渐替换为实际内容。

最佳实践

在编写加载动画时，遵循一些最佳实践至关重要：

保持简洁： 加载动画应该简洁明了，避免分散用户对主要任务的注意力。
提供反馈： 动画应该清楚地传达操作的进度或状态。
避免无限循环： 无限循环的动画会让人烦躁，因此请确保动画在加载完成后停止。
与品牌保持一致： 加载动画应该与应用程序或网站的整体设计风格保持一致。
考虑可访问性： 确保加载动画对所有用户都是可见和可理解的，包括视障或色盲用户。

使用代码实现

使用代码实现加载动画相对简单。以下是一些在 JavaScript 和 CSS 中实现常见加载动画类型的示例：

进度条（JavaScript）：

// 创建一个进度条元素
const progressBar = document.createElement("progress");

// 设置进度条的最大值
progressBar.max = 100;

// 更新进度条的值
progressBar.value = 50;

// 将进度条添加到文档中
document.body.appendChild(progressBar);

旋转指示器（CSS）：

.spinner {
  animation: spin 1s linear infinite;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid #000;
  border-top-color: transparent;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

跳动动画（CSS）：

.bouncing-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #000;
  margin: 0 5px;
  animation: bounce 1s linear infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}