Text-Spinner | CSS-Tricks

Eine clevere Idee für textbasierte Spinner in CSS. Sie legen die "Keyframes" im Inhalt fest und durchlaufen sie, indem Sie die Textzeile in den tatsächlichen Keyframes nach links verschieben.

<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); } }

Dies ist ein ganzes Repository davon von Max Beier. Ich habe eines davon hier isoliert

Sehen Sie sich den Pen text-spinner von Chris Coyier (@chriscoyier) auf CodePen an.

Direkter Link →