CSS loader

loader.less

.loader {
    @w: 48px;
    @m: 16px;
    position:fixed;
    left:50%;
    top:50%;
    width:@w + 2 * @m;
    height:@w + 2 * @m;
    margin-left:-(@w / 2 + @m);
    margin-top:-(@w / 2 + @m);
    background:fade(@black, 65%);
    z-index:999;
    .border-radius(5px);
    &::before {
        content:"";
        display:block;
        width:@w;
        height:@w;
        margin:@m;
        border:3px solid (@white);
        border-color:transparent transparent fade(@white, 85%) fade(@white, 85%);
        .border-radius(100%);
        .border-box();
        .animation(rotate .5s linear infinite);
    }
}

@keyframes rotate {
      0% { .transform(rotateZ(-360deg)); }
    100% { .transform(rotateZ(0deg)); }
}
@-webkit-keyframes rotate {
      0% { .transform(rotateZ(-360deg)); }
    100% { .transform(rotateZ(0deg)); }
}
@-moz-keyframes rotate {
      0% { .transform(rotateZ(-360deg)); }
    100% { .transform(rotateZ(0deg)); }
}
@-o-keyframes rotate {
      0% { .transform(rotateZ(-360deg)); }
    100% { .transform(rotateZ(0deg)); }
}