这篇文章上次修改于 449 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

今天下午打开 小窝 日常添补日记内容的时候，发现 Vite 新版后台的一言加载效果太生硬了，只有“一言加载中...”的静态效果，我就在想，能不能让三个小点点变成动态的呢？

大多数开发者的第一直觉恐怕都是使用 JS 结合 setInterval 来完成吧，换个角度思考下，其实 CSS 就能支持这个效果，使用动画就可以，只是动画改变的项目是伪元素的 content 属性。

此前一直以为这种非外观的属性无法实现，谁知道今天一时好奇就给整出来了，哈哈哈，Web 开发就是会给人很多无数的惊喜啊。

代码

.text-loading:after{
  content: "...";
  animation: text-loading 2s infinite;
}

@keyframes text-loading {
  25%{
    content: ".";
  }
  50%{
    content: "..";
  }
  100%{
    content: "...";
  }
}

<p class="text-loading">奇趣保罗正在持续等待着一个心仪的人</p>

只需要一个类名就能搞定，很方便吧！到时候很有可能会将这个功能预设在 奇趣框架 里面！

效果

奇趣保罗正在持续等待着一个心仪的人

兼容性

目前发现，Safari 全系均不支持这个效果，太蛋疼了。我倒是想到了另外一个实现的方法，改变块的 Width 就行，同样是使用 CSS3 动画实现，显然这样做没第一个方法那么优雅。

.text-loading-width:after{
  content: "...";
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
  animation: text-loading-width 2s steps(2, start) infinite;
}

@keyframes text-loading-width {
  0%{
    width: .25em;
  }
  50%{
    width: .5em;
  }
  100%{
    width: .75em;
  }
}

<p class="text-loading-width">奇趣保罗正在持续等待着一个心仪的人</p>

奇趣保罗正在持续等待着一个心仪的人