search

mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link

Animated ellipsis … #87

Open mhulse opened 8 years ago

mhulse commented 8 years ago 
/*
See: https://martinwolf.org/blog/2015/01/pure-css-savingloading-dots-animation
<span class="loading">Waiting to begin <span>.</span><span>.</span><span>.</span></span>
*/

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}
.loading span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.loading span:nth-child(2) { animation-delay: .2s; }
.loading span:nth-child(3) { animation-delay: .4s; }