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，使其运动起来。