An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
September 30, 2016 01:18 pm GMT
Original Link: http://tawian.io/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 …
text-spinners is a post from CSS-Tricks
Original Link: http://tawian.io/text-spinners/
Share this article:
Tweet
View Full Article