A Pen by Vitaliy Ralle.

CSS3-Spinner.markdown

CSS3 Spinner

A Pen by Vitaliy Ralle on CodePen.

License.

index.html

<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>

style.css

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;}
}