Skip to content

Instantly share code, notes, and snippets.

@iamkevinv
Created December 4, 2013 04:09
Show Gist options
  • Save iamkevinv/7782201 to your computer and use it in GitHub Desktop.
Save iamkevinv/7782201 to your computer and use it in GitHub Desktop.
Just for fun™: Flickr spinner in pure CSS - Lea L
/**
* Just for fun™: Flickr spinner in pure CSS - Lea L
*/
@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","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment