文字加载动画

一个巧妙的 CSS 文本加载动画想法。 您在 content 中设置“关键帧”，并通过在实际的 keyframes 中将文本行向左移动来循环遍历它们。

<button>Loading <span class="loading"></span></button>

.loading.bar2::after {
  content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  animation: spin8 2s steps(8) infinite alternate;
}
@keyframes spin8  { to { transform: translateY(-12.0em); } }

这是 Max Beier 的一个完整的存储库。 我在这里隔离了一个。

查看 Chris Coyier 在 CodePen 上的 Pen 文字加载动画（@chriscoyier）。

直接链接 →