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

今天下午打开 小窝 日常添补日记内容的时候,发现 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>

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