CSS实现单行文字加载效果

效果

折腾猫正在持续等待着一个心仪的人

代码

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

@keyframes text-loading {
  25%{
    content: ".";
  }
  50%{
    content: "..";
  }
  100%{
    content: "...";
  }
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>