超简单的 HTML 打点实现 “...”

平时在开发中会遇到一些让用户处于等待状态的操作，比如上传一个大文件时显示“上传中...”，点击某一个按钮等待后端数据返回的过程中显示“执行中...”等等。在这时，为了用户体验，一般都会采用打点的方式，让用户知道该操作在执行中，并没有卡死。

下面来分享一种我自己做的超简单的打点方式，灵感来自于张鑫旭大神的《CSS 世界》一书。

HTML

<span>
  正在加载中
  <span class="dot"></span>
</span>

CSS

.dot::before {
  content: ".";
  animation: dot 3s infinite;
}

@keyframes dot {
  33% { content: ".."; }
  66% { content: "..."; }
}

效果