Home » Web » CSS » text-spinners

text-spinners

A clever idea for text-based spinners in CSS. You set the “keyframes” in the content, and cycle through them by moving the line of text to the left in the actual 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); } }

This is a whole repo of them by Max Beier. I’ve isolated one of them here:

See the Pen text-spinners by Chris Coyier (@chriscoyier) on CodePen.

Direct Link to ArticlePermalink


text-spinners is a post from CSS-Tricks

Feed Source: CSS-Tricks
Article Source: text-spinners

About Admin

Powered by WP Robot