Pure CSS Loading Spinner

with 3d transforms and background hue transitions just for kicks (webkit)

HTML

<div id="loading-spin">
    <div id="loading-bit-1" class="loading-bit"></div>
    <div id="loading-bit-2" class="loading-bit"></div>
    <div id="loading-bit-3" class="loading-bit"></div>
    <div id="loading-bit-4" class="loading-bit"></div>
    <div id="loading-bit-5" class="loading-bit"></div>
    <div id="loading-bit-6" class="loading-bit"></div>
    <div id="loading-bit-7" class="loading-bit"></div>
    <div id="loading-bit-8" class="loading-bit"></div>
</div>

CSS

#loading-spin {
    position: relative;
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    top: 50%;
    left: 50%;
    /*-webkit-transform: rotateY(-30deg) rotateX(25deg);*/
}

.loading-bit {
    position: absolute;
    left: 45%; /* 50% - (width / 2) */
    bottom: 50%;
    width: 10%;
    height: 35%;
    border-radius: 200px;
    -webkit-transform-origin: center bottom;
    -webkit-animation: loading-pulse 800ms ease-in-out infinite;
}

#loading-bit-1 {
    -webkit-transform: translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 800ms;
}

#loading-bit-2 {
    -webkit-transform: rotate(45deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 900ms;
}

#loading-bit-3 {
    -webkit-transform: rotate(90deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 1000ms;
}

#loading-bit-4 {
    -webkit-transform: rotate(135deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 1100ms;
}

#loading-bit-5 {
    -webkit-transform: rotate(180deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 1200ms;
}

#loading-bit-6 {
    -webkit-transform: rotate(225deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 1300ms;
}

#loading-bit-7 {
    -webkit-transform: rotate(270deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 1400ms;
}

#loading-bit-8 {
    -webkit-transform: rotate(315deg) translate(0, -42.8%); /* (50% - height) / height */
    -webkit-animation-delay: 1500ms;
}

@-webkit-keyframes loading-pulse
{
    0%   { background-color: hsla(0,0%,0%,0); }
    10%   { background-color: hsla(0,0%,0%,.3); }
    90% { background-color: hsla(0,0%,0%,0); }
}

@-webkit-keyframes croma-rotate
{
    0%   { -webkit-filter: hue-rotate(0deg); }
    100% { -webkit-filter: hue-rotate(360deg); }
}

html {
    height: 100%;
    /*box-shadow: inset 0 0 200px...