Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created May 20, 2013 13:48
Show Gist options
  • Save LeaVerou/5612346 to your computer and use it in GitHub Desktop.
Save LeaVerou/5612346 to your computer and use it in GitHub Desktop.
Just for fun™: Flickr spinner in pure CSS
/**
* Just for fun™: Flickr spinner in pure CSS
*/
@keyframes move {
to { left: 50%; }
}
@keyframes cover {
from,49.9% { z-index: 1 }
50.1%, to { z-index: 0 }
}
.flickr-spinner {
width: 2em;
height: 1em;
position: relative;
}
.flickr-spinner:before,
.flickr-spinner:after {
content: '';
position: absolute;
left: 0;
width: 50%;
height: 100%;
border-radius: 50%;
animation: cover 2s infinite reverse,
move 1s infinite alternate;
}
.flickr-spinner:before {
background: #0063dc;
animation-direction: normal, alternate-reverse;
}
.flickr-spinner:after {
background: #ff0084;
}
<div class="flickr-spinner"></div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment