【小Tip】纯CSS实现加载中三个点循环出现动画加载中... 这种朴素简单的loading提示很常用，要是加一点点动画便

加载中...

这种朴素简单的loading提示很常用，要是加一点点动画便能让体验提升一些些。

不妨让三个点 ... 动起来，一个个循环出现，直接看效果：

纯CSS实现，不需要JS逻辑，核心就是利用伪元素 content: '\A.\A..\A...'; 一个点到三个点分三行通过动画循环滚动展示。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .three-dots {
      --size: 20px;
      display: inline-block;
      font-size: var(--size);
      height: var(--size);
      line-height: var(--size);
      overflow: hidden;
      vertical-align: bottom;
    }

    .three-dots::after {
      display: inline-block;
      white-space: pre;
      content: '\A.\A..\A...';
      animation: loop 2s steps(4) infinite;
    }

    @keyframes loop {
      to {
        transform: translateY(calc(0px - var(--size) * 4));
      }
    }
  </style>
</head>

<body>
  加载中<span class="three-dots"></span>
</body>

</html>

动画用到了 animation 的 steps

steps(n, <jumpterm>)

按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。