Skip to content

Instantly share code, notes, and snippets.

Created December 10, 2013 05:13
Show Gist options
  • Save anonymous/7886029 to your computer and use it in GitHub Desktop.
Save anonymous/7886029 to your computer and use it in GitHub Desktop.
A Pen by Robert Blecha.
<figure>
<div class="dotwrap dotwrap1"><div class="dot dot1"></div></div>
<div class="dotwrap dotwrap2"><div class="dot dot2"></div></div>
<div class="dotwrap dotwrap3"><div class="dot dot3"></div></div>
<div class="dotwrap dotwrap4"><div class="dot dot4"></div></div>
<div class="dotwrap dotwrap5"><div class="dot dot5"></div></div>
</figure>
body { background: #222; }
figure {
position: absolute;
margin: auto;
top: 0; bottom: 0; left: 0; right: 0;
width: 3em; height: 3em;
animation: rotate 2.4s linear infinite;
}
.dotwrap {
width:1.2em;
height:3em;
position: absolute;
left:50%;
margin-left:-0.6em;
top:50%;
margin-top:-1.4em
}
.dotwrap1 {transform: rotate(0deg);}
.dotwrap2 {transform: rotate(72deg);}
.dotwrap3 {transform: rotate(144deg);}
.dotwrap4 {transform: rotate(216deg);}
.dotwrap5 {transform: rotate(288deg);}
.dot {
width: 1.2em;
height: 1.2em;
border-radius: 100%;
transition: all 1s ease;
}
.dotwrap { animation: smallbig 2.4s linear infinite; }
.dot1 { background: #ff657f; animation: dots 2.4s linear infinite; }
.dot2 { background: #ff9231; animation: dots 2.4s linear infinite; }
.dot3 { background: #a3d869; animation: dots 2.4s linear infinite; }
.dot4 { background: #fbda64; animation: dots 2.4s linear infinite; }
.dot5 { background: #5bb4e5; animation: dots 2.4s linear infinite; }
@keyframes rotate {
0% { transform: rotate( 0 ); }
100%{ transform: rotate(360deg); }
}
@keyframes smallbig {
50% { height:1.2em; margin-top:-0.6em;}
}
@keyframes dots {
50% { opacity: .1; }
100%{ opacity: .9; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment