Skip to content

Instantly share code, notes, and snippets.

@vralle
Created October 8, 2014 16:29
Show Gist options
  • Save vralle/919d6f0fa51ec0c11796 to your computer and use it in GitHub Desktop.
Save vralle/919d6f0fa51ec0c11796 to your computer and use it in GitHub Desktop.
A Pen by Vitaliy Ralle.
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
html, body {
background: #e5e5e5;
text-align: center;
padding: 5%;
}
div.spinner {
position: relative;
width: 54px;
height: 54px;
display: inline-block;
}
div.spinner div {
width: 12%;
height: 26%;
background: #000;
position: absolute;
left: 44.5%;
top: 37%;
opacity: 0;
-webkit-animation: fade 1s linear infinite; /* Safari 4+ */
-moz-animation: fade 1s linear infinite; /* Fx 5+ */
-o-animation: fade 1s linear infinite; /* Opera 12+ */
animation: fade 1s linear infinite; /* IE 10+, Fx 29+ */
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
div.spinner div.bar1 {
-webkit-transform:rotate(0deg) translate(0, -142%);
-moz-transform:rotate(0deg) translate(0, -142%);
-ms-transform:rotate(0deg) translate(0, -142%);
-o-transform:rotate(0deg) translate(0, -142%);
transform:rotate(0deg) translate(0, -142%);
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
div.spinner div.bar2 {
-webkit-transform: rotate(30deg) translate(0, -142%);
-moz-transform: rotate(30deg) translate(0, -142%);
-ms-transform: rotate(30deg) translate(0, -142%);
-o-transform: rotate(30deg) translate(0, -142%);
transform: rotate(30deg) translate(0, -142%);
-webkit-animation-delay: -0.9167s;
-moz-animation-delay: -0.9167s;
-ms-animation-delay: -0.9167s;
-o-animation-delay: -0.9167s;
animation-delay: -0.9167s;
}
div.spinner div.bar3 {
-webkit-transform:rotate(60deg) translate(0, -142%);
-moz-transform:rotate(60deg) translate(0, -142%);
-ms-transform:rotate(60deg) translate(0, -142%);
-o-transform:rotate(60deg) translate(0, -142%);
transform:rotate(60deg) translate(0, -142%);
-webkit-animation-delay:-0.833s;
-moz-animation-delay:-0.833s;
-ms-animation-delay:-0.833s;
-o-animation-delay:-0.833s;
animation-delay:-0.833s;
}
div.spinner div.bar4 {
-webkit-transform:rotate(90deg) translate(0, -142%);
-moz-transform:rotate(90deg) translate(0, -142%);
-ms-transform:rotate(90deg) translate(0, -142%);
-o-transform:rotate(90deg) translate(0, -142%);
transform:rotate(90deg) translate(0, -142%);
-webkit-animation-delay:-0.75s;
-moz-animation-delay:-0.75s;
-ms-animation-delay:-0.75s;
-o-animation-delay:-0.75s;
animation-delay:-0.75s;
}
div.spinner div.bar5 {
-webkit-transform:rotate(120deg) translate(0, -142%);
-moz-transform:rotate(120deg) translate(0, -142%);
-ms-transform:rotate(120deg) translate(0, -142%);
-o-transform:rotate(120deg) translate(0, -142%);
transform:rotate(120deg) translate(0, -142%);
-webkit-animation-delay:-0.667s;
-moz-animation-delay:-0.667s;
-ms-animation-delay:-0.667s;
-o-animation-delay:-0.667s;
animation-delay:-0.667s;
}
div.spinner div.bar6 {
-webkit-transform:rotate(150deg) translate(0, -142%);
-moz-transform:rotate(150deg) translate(0, -142%);
-ms-transform:rotate(150deg) translate(0, -142%);
-o-transform:rotate(150deg) translate(0, -142%);
transform:rotate(150deg) translate(0, -142%);
-webkit-animation-delay:-0.5833s;
-moz-animation-delay:-0.5833s;
-ms-animation-delay:-0.5833s;
-o-animation-delay:-0.5833s;
animation-delay:-0.5833s;
}
div.spinner div.bar7 {
-webkit-transform:rotate(180deg) translate(0, -142%);
-moz-transform:rotate(180deg) translate(0, -142%);
-ms-transform:rotate(180deg) translate(0, -142%);
-o-transform:rotate(180deg) translate(0, -142%);
transform:rotate(180deg) translate(0, -142%);
-webkit-animation-delay:-0.5s;
-moz-animation-delay:-0.5s;
-ms-animation-delay:-0.5s;
-o-animation-delay:-0.5s;
animation-delay:-0.5s;
}
div.spinner div.bar8 {
-webkit-transform:rotate(210deg) translate(0, -142%);
-moz-transform:rotate(210deg) translate(0, -142%);
-ms-transform:rotate(210deg) translate(0, -142%);
-o-transform:rotate(210deg) translate(0, -142%);
transform:rotate(210deg) translate(0, -142%);
-webkit-animation-delay:-0.41667s;
-moz-animation-delay:-0.41667s;
-ms-animation-delay:-0.41667s;
-o-animation-delay:-0.41667s;
animation-delay:-0.41667s;
}
div.spinner div.bar9 {
-webkit-transform:rotate(240deg) translate(0, -142%);
-moz-transform:rotate(240deg) translate(0, -142%);
-ms-transform:rotate(240deg) translate(0, -142%);
-o-transform:rotate(240deg) translate(0, -142%);
transform:rotate(240deg) translate(0, -142%);
-webkit-animation-delay:-0.333s;
-moz-animation-delay:-0.333s;
-ms-animation-delay:-0.333s;
-o-animation-delay:-0.333s;
animation-delay:-0.333s;
}
div.spinner div.bar10 {
-webkit-transform:rotate(270deg) translate(0, -142%);
-moz-transform:rotate(270deg) translate(0, -142%);
-ms-transform:rotate(270deg) translate(0, -142%);
-o-transform:rotate(270deg) translate(0, -142%);
transform:rotate(270deg) translate(0, -142%);
-webkit-animation-delay:-0.25s;
-moz-animation-delay:-0.25s;
-ms-animation-delay:-0.25s;
-o-animation-delay:-0.25s;
animation-delay:-0.25s;
}
div.spinner div.bar11 {
-webkit-transform:rotate(300deg) translate(0, -142%);
-moz-transform:rotate(300deg) translate(0, -142%);
-ms-transform:rotate(300deg) translate(0, -142%);
-o-transform:rotate(300deg) translate(0, -142%);
transform:rotate(300deg) translate(0, -142%);
-webkit-animation-delay:-0.1667s;
-moz-animation-delay:-0.1667s;
-ms-animation-delay:-0.1667s;
-o-animation-delay:-0.1667s;
animation-delay:-0.1667s;
}
div.spinner div.bar12 {
-webkit-transform:rotate(330deg) translate(0, -142%);
-moz-transform:rotate(330deg) translate(0, -142%);
-ms-transform:rotate(330deg) translate(0, -142%);
-o-transform:rotate(330deg) translate(0, -142%);
transform:rotate(330deg) translate(0, -142%);
-webkit-animation-delay:-0.0833s;
-moz-animation-delay:-0.0833s;
-ms-animation-delay:-0.0833s;
-o-animation-delay:-0.0833s;
animation-delay:-0.0833s;
}
@-webkit-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}
@-moz-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}
@-o-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}
@keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment