纯 CSS 实现加载中动画效果：简单易用的加载条代码

本文将介绍如何使用纯 CSS 代码实现加载中动画效果，以简单的加载条为例，展示代码示例和详细解释，帮助你快速创建加载动画，提升用户体验。

HTML 代码：

<div class='loading'>
  <div class='loading-bar'></div>
</div>

CSS 代码：

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-bar {
  width: 100px;
  height: 10px;
  background-color: #ccc;
  border-radius: 5px;
  animation: loading 1s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: translateX(-100px);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

说明：

首先，我们创建了一个父容器 `.loading` ，将其定位到页面的左上角，设置了其宽高和背景色，并使用 flex 布局使其内部元素垂直和水平居中。

接着，我们创建了一个子元素 `.loading-bar` ，并设置其宽高、背景色和圆角。我们使用 `@keyframes` 定义了一个名为 `loading` 的动画，用于控制 `.loading-bar` 的运动轨迹。在动画中，我们使用 `translateX` 将 `.loading-bar` 沿着 X 轴平移，从而实现了加载条的动画效果。

最后，我们将 `.loading-bar` 元素的动画属性设置为 `loading`，使其运动起来。