Spindicator - a CSS-only loading indicator with 100% more rotational goodness

spin.less

@spinner-size:              64px;
@spinner-offset:            @spinner-size / 2;
@spinner-anim-length:       3s;
@spinner-tine-size:         12px;
@spinner-tine-steps:        12;
@spinner-tine-step:         360deg / @spinner-tine-steps;
@spinner-tine-step-delay:   (@spinner-anim-length / 2) / @spinner-tine-steps;

@-webkit-keyframes spinner {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
   @-moz-keyframes spinner {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
     @-o-keyframes spinner {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes spinner-rotate {
    0% {
        -webkit-transform: rotate(0) translateZ(0);
    }
    50% {
        -webkit-transform: rotate(180deg) translateZ(0);
    }
    100% {
        -webkit-transform: rotate(360deg) translateZ(0);
    }
}
   @-moz-keyframes spinner-rotate {
    0% {
        -moz-transform: rotate(0) translateZ(0);
    }
    50% {
        -moz-transform: rotate(180deg) translateZ(0);
    }
    100% {
        -moz-transform: rotate(360deg) translateZ(0);
    }
}
     @-o-keyframes spinner-rotate {
    0% {
        -o-transform: rotate(0) translateZ(0);
    }
    50% {
        -o-transform: rotate(180deg) translateZ(0);
    }
    100% {
        -o-transform: rotate(360deg) translateZ(0);
    }
}


.spindicator {
    height: @spinner-size;
    list-style: none;
    margin: -@spinner-offset 0 0 -@spinner-offset;
    overflow: hidden;
    position: absolute; left: 50%; top: 50%;
    width: @spinner-size;

    -webkit-animation: spinner-rotate (@spinner-anim-length) linear infinite;
       -moz-animation: spinner-rotate (@spinner-anim-length) linear infinite;
         -o-animation: spinner-rotate (@spinner-anim-length) linear infinite;
    -webkit-transform-origin: center;
       -moz-transform-origin: center;
         -o-transform-origin: center;    
    
    li {
        background-color: #333;
        height: @spinner-tine-size;
        margin: 0;
        position: absolute; left: 50%;
        text-indent: -9999px;
        width: @spinner-tine-size / 2;
    
        -webkit-animation: spinner (@spinner-anim-length / 2) linear infinite;
           -moz-animation: spinner (@spinner-anim-length / 2) linear infinite;
             -o-animation: spinner (@spinner-anim-length / 2) linear infinite;
        -webkit-transform-origin: 0 32px;
           -moz-transform-origin: 0 32px;
             -o-transform-origin: 0 32px;                
        
        &:nth-of-type(1) {
            -webkit-animation-delay: @spinner-tine-step-delay;
               -moz-animation-delay: @spinner-tine-step-delay;
                 -o-animation-delay: @spinner-tine-step-delay;
            -webkit-transform: rotate(@spinner-tine-step);
               -moz-transform: rotate(@spinner-tine-step);
                 -o-transform: rotate(@spinner-tine-step);                        
        }
        &:nth-of-type(2) {
            -webkit-animation-delay: @spinner-tine-step-delay * 2;
               -moz-animation-delay: @spinner-tine-step-delay * 2;
                 -o-animation-delay: @spinner-tine-step-delay * 2;
            -webkit-transform: rotate(@spinner-tine-step * 2);
               -moz-transform: rotate(@spinner-tine-step * 2);
                 -o-transform: rotate(@spinner-tine-step * 2);
        }
        &:nth-of-type(3) {
            -webkit-animation-delay: @spinner-tine-step-delay * 3;
               -moz-animation-delay: @spinner-tine-step-delay * 3;
                 -o-animation-delay: @spinner-tine-step-delay * 3;
            -webkit-transform: rotate(@spinner-tine-step * 3);
               -moz-transform: rotate(@spinner-tine-step * 3);
                 -o-transform: rotate(@spinner-tine-step * 3);
        }
        &:nth-of-type(4) {
            -webkit-animation-delay: @spinner-tine-step-delay * 4;
               -moz-animation-delay: @spinner-tine-step-delay * 4;
                 -o-animation-delay: @spinner-tine-step-delay * 4;
            -webkit-transform: rotate(@spinner-tine-step * 4);
               -moz-transform: rotate(@spinner-tine-step * 4);
                 -o-transform: rotate(@spinner-tine-step * 4);
        }
        &:nth-of-type(5) {
            -webkit-animation-delay: @spinner-tine-step-delay * 5;
               -moz-animation-delay: @spinner-tine-step-delay * 5;
                 -o-animation-delay: @spinner-tine-step-delay * 5;
            -webkit-transform: rotate(@spinner-tine-step * 5);
               -moz-transform: rotate(@spinner-tine-step * 5);
                 -o-transform: rotate(@spinner-tine-step * 5);
        }
        &:nth-of-type(6) {
            -webkit-animation-delay: @spinner-tine-step-delay * 6;
               -moz-animation-delay: @spinner-tine-step-delay * 6;
                 -o-animation-delay: @spinner-tine-step-delay * 6;
            -webkit-transform: rotate(@spinner-tine-step * 6);
               -moz-transform: rotate(@spinner-tine-step * 6);
                 -o-transform: rotate(@spinner-tine-step * 6);
        }
        &:nth-of-type(7) {
            -webkit-animation-delay: @spinner-tine-step-delay * 7;
               -moz-animation-delay: @spinner-tine-step-delay * 7;
                 -o-animation-delay: @spinner-tine-step-delay * 7;
            -webkit-transform: rotate(@spinner-tine-step * 7);
               -moz-transform: rotate(@spinner-tine-step * 7);
                 -o-transform: rotate(@spinner-tine-step * 7);
        }
        &:nth-of-type(8) {
            -webkit-animation-delay: @spinner-tine-step-delay * 8;
               -moz-animation-delay: @spinner-tine-step-delay * 8;
                 -o-animation-delay: @spinner-tine-step-delay * 8;
            -webkit-transform: rotate(@spinner-tine-step * 8);
               -moz-transform: rotate(@spinner-tine-step * 8);
                 -o-transform: rotate(@spinner-tine-step * 8);
        }
        &:nth-of-type(9) {
            -webkit-animation-delay: @spinner-tine-step-delay * 9;
               -moz-animation-delay: @spinner-tine-step-delay * 9;
                 -o-animation-delay: @spinner-tine-step-delay * 9;
            -webkit-transform: rotate(@spinner-tine-step * 9);
               -moz-transform: rotate(@spinner-tine-step * 9);
                 -o-transform: rotate(@spinner-tine-step * 9);
        }
        &:nth-of-type(10) {
            -webkit-animation-delay: @spinner-tine-step-delay * 10;
               -moz-animation-delay: @spinner-tine-step-delay * 10;
                 -o-animation-delay: @spinner-tine-step-delay * 10;
            -webkit-transform: rotate(@spinner-tine-step * 10);
               -moz-transform: rotate(@spinner-tine-step * 10);
                 -o-transform: rotate(@spinner-tine-step * 10);
        }
        &:nth-of-type(11) {
            -webkit-animation-delay: @spinner-tine-step-delay * 11;
               -moz-animation-delay: @spinner-tine-step-delay * 11;
                 -o-animation-delay: @spinner-tine-step-delay * 11;
            -webkit-transform: rotate(@spinner-tine-step * 11);
               -moz-transform: rotate(@spinner-tine-step * 11);
                 -o-transform: rotate(@spinner-tine-step * 11);
        }
        &:nth-of-type(12) {
            -webkit-animation-delay: @spinner-tine-step-delay * 12;
               -moz-animation-delay: @spinner-tine-step-delay * 12;
                 -o-animation-delay: @spinner-tine-step-delay * 12;
            -webkit-transform: rotate(@spinner-tine-step * 12);
               -moz-transform: rotate(@spinner-tine-step * 12);
                 -o-transform: rotate(@spinner-tine-step * 12);
        }
    }
}

spinner.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Spindicator</title>

    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
    <ul class="spindicator">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
        
</body>
</html>

styles.css

@-webkit-keyframes spinner {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes spinner {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes spinner {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes spinner-rotate {
  0% {
    -webkit-transform: rotate(0) translatez(0);
  }
  50% {
    -webkit-transform: rotate(180deg) translatez(0);
  }
  100% {
    -webkit-transform: rotate(360deg) translatez(0);
  }
}
@-moz-keyframes spinner-rotate {
  0% {
    -moz-transform: rotate(0) translatez(0);
  }
  50% {
    -moz-transform: rotate(180deg) translatez(0);
  }
  100% {
    -moz-transform: rotate(360deg) translatez(0);
  }
}
@-o-keyframes spinner-rotate {
  0% {
    -o-transform: rotate(0) translatez(0);
  }
  50% {
    -o-transform: rotate(180deg) translatez(0);
  }
  100% {
    -o-transform: rotate(360deg) translatez(0);
  }
}
.spindicator {
  height: 64px;
  list-style: none;
  margin: -32px 0 0 -32px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  -webkit-animation: spinner-rotate 3s linear infinite;
  -moz-animation: spinner-rotate 3s linear infinite;
  -o-animation: spinner-rotate 3s linear infinite;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
}
.spindicator li {
  background-color: #333;
  height: 12px;
  margin: 0;
  position: absolute;
  left: 50%;
  text-indent: -9999px;
  width: 6px;
  -webkit-animation: spinner 1.5s linear infinite;
  -moz-animation: spinner 1.5s linear infinite;
  -o-animation: spinner 1.5s linear infinite;
  -webkit-transform-origin: 0 32px;
  -moz-transform-origin: 0 32px;
  -o-transform-origin: 0 32px;
}
.spindicator li:nth-of-type(1) {
  -webkit-animation-delay: 0.125s;
  -moz-animation-delay: 0.125s;
  -o-animation-delay: 0.125s;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
.spindicator li:nth-of-type(2) {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
.spindicator li:nth-of-type(3) {
  -webkit-animation-delay: 0.375s;
  -moz-animation-delay: 0.375s;
  -o-animation-delay: 0.375s;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.spindicator li:nth-of-type(4) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
}
.spindicator li:nth-of-type(5) {
  -webkit-animation-delay: 0.625s;
  -moz-animation-delay: 0.625s;
  -o-animation-delay: 0.625s;
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -o-transform: rotate(150deg);
}
.spindicator li:nth-of-type(6) {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.spindicator li:nth-of-type(7) {
  -webkit-animation-delay: 0.875s;
  -moz-animation-delay: 0.875s;
  -o-animation-delay: 0.875s;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
}
.spindicator li:nth-of-type(8) {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -o-transform: rotate(240deg);
}
.spindicator li:nth-of-type(9) {
  -webkit-animation-delay: 1.125s;
  -moz-animation-delay: 1.125s;
  -o-animation-delay: 1.125s;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
}
.spindicator li:nth-of-type(10) {
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
  -o-animation-delay: 1.25s;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -o-transform: rotate(300deg);
}
.spindicator li:nth-of-type(11) {
  -webkit-animation-delay: 1.375s;
  -moz-animation-delay: 1.375s;
  -o-animation-delay: 1.375s;
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -o-transform: rotate(330deg);
}
.spindicator li:nth-of-type(12) {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

Demo: http://cl.ly/HCGD/spinner2.html

It's centered, it animates, it spins!