Skip to content

Instantly share code, notes, and snippets.

@Diwann

Diwann/dabblet.css

Forked from LeaVerou/dabblet.css
Created May 20, 2013
Embed
What would you like to do?
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":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.