During development, you will encounter some operations that keep users in a waiting state, such as “uploading…” when uploading a large file. , click a button and wait for the back end data to return. And so on. At this point, for the sake of user experience, the general way will be used to let the user know that the operation is in execution, and not stuck.

Here is a super simple way to do my own, inspired by zhang Xinxu’s book CSS World.

HTML

<span> loading <span class="dot"></span>
</span>
Copy the code

CSS

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

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

The effect