http://brianbeck.com/spinner/

spinner.less

// Default mixin settings
@spinner-default-color: #000;
@spinner-default-size: 16px;

// Opacity, spacing, speed
@spinner-opacity: 70%; // Opacity of the brightest dot
@spinner-decay: 0.7;   // Opacity of each dot compared to the previous
@spinner-spacing: 1;   // Distance multiplier between dots
@spinner-duration: 1s; // Time it takes for one revolution

// Shape
@spinner-font: sans-serif;
@spinner-content: '\25cf'; // Unicode BLACK CIRCLE

// Center alignment parameters (may need to tweak for different fonts)
@spinner-center-x: 0.25em;
@spinner-center-y: 0.5em;

.spinner-animation(@name, @color) {
    @color-1: fade(@color, @spinner-opacity * pow(@spinner-decay, 0));
    @color-2: fade(@color, @spinner-opacity * pow(@spinner-decay, 1));
    @color-3: fade(@color, @spinner-opacity * pow(@spinner-decay, 2));
    @color-4: fade(@color, @spinner-opacity * pow(@spinner-decay, 3));
    @color-5: fade(@color, @spinner-opacity * pow(@spinner-decay, 4));
    @color-6: fade(@color, @spinner-opacity * pow(@spinner-decay, 5));
    @horizontal-offset-1: 0.4em * @spinner-spacing;
    @horizontal-offset-2: 1.2em * @spinner-spacing;
    @horizontal-offset-3: 1.6em * @spinner-spacing;
    @vertical-offset-1: 0.7em * @spinner-spacing;
    @vertical-offset-2: -0.75em * @spinner-spacing;

    @keyframes @name {
        0% {
            width: 4em * @spinner-spacing;
            color: @color-1;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-3,
                         @horizontal-offset-3 0 0 @color-4,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-5,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-6;
        }

        17% {
            color: @color-2;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-3,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-4,
                         @horizontal-offset-3 0 0 @color-5,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-6,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-1;
        }

        33% {
            color: @color-3;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-4,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-5,
                         @horizontal-offset-3 0 0 @color-6,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-1,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-2;
        }

        50% {
            color: @color-4;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-5,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-6,
                         @horizontal-offset-3 0 0 @color-1,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-2,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-3;
        }

        67% {
            color: @color-5;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-6,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-1,
                         @horizontal-offset-3 0 0 @color-2,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-3,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-4;
        }

        83% {
            color: @color-6;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-1,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-2,
                         @horizontal-offset-3 0 0 @color-3,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-4,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-5;
        }

        100% {
            width: 4em * @spinner-spacing;
            color: @color-1;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-3,
                         @horizontal-offset-3 0 0 @color-4,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-5,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-6;
        }
    }

    @-webkit-keyframes @name {
        0% {
            width: 4em * @spinner-spacing;
            color: @color-1;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-3,
                         @horizontal-offset-3 0 0 @color-4,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-5,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-6;
        }

        17% {
            color: @color-2;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-3,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-4,
                         @horizontal-offset-3 0 0 @color-5,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-6,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-1;
        }

        33% {
            color: @color-3;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-4,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-5,
                         @horizontal-offset-3 0 0 @color-6,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-1,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-2;
        }

        50% {
            color: @color-4;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-5,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-6,
                         @horizontal-offset-3 0 0 @color-1,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-2,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-3;
        }

        67% {
            color: @color-5;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-6,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-1,
                         @horizontal-offset-3 0 0 @color-2,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-3,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-4;
        }

        83% {
            color: @color-6;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-1,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-2,
                         @horizontal-offset-3 0 0 @color-3,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-4,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-5;
        }

        100% {
            width: 4em * @spinner-spacing;
            color: @color-1;
            text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2,
                         @horizontal-offset-2 @vertical-offset-1 0 @color-3,
                         @horizontal-offset-3 0 0 @color-4,
                         @horizontal-offset-2 @vertical-offset-2 0 @color-5,
                         @horizontal-offset-1 @vertical-offset-2 0 @color-6;
        }
    }
}

.spinner-animation(bd-default-spinner, @spinner-default-color);

.default-spinner(@size: @spinner-default-size, @animation: bd-default-spinner) {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 0;
    padding: (2em * @spinner-spacing) 0;
    margin: -(2em * @spinner-spacing + @spinner-center-y) 0 0 -(0.8em * @spinner-spacing + @spinner-center-x);
    font-size: @size;
    font-weight: normal;
    line-height: 1em;
    content: @spinner-content;
    text-align: left;
    color: @spinner-default-color;
    animation: @animation @spinner-duration linear 0s infinite;
    -webkit-animation: @animation @spinner-duration linear 0s infinite;
}

.loading {
    &:before { .default-spinner(); }
}