<div class="preloader">
  <div class="preloader-container">
    <span class="animated-preloader"></span>
  </div>
</div>
/* Variables */
@red: #f35353;

/* Mixins */
.round(@radius: 3px){
    border-radius: @radius;
}
.transform(@arguments){
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -ms-transform: @arguments;
    -o-transform: @arguments;
    transform: @arguments;
}
/* Animations */
@-webkit-keyframes preloader-inside-white{
    0%{
        .transform(scale(0, 0));
    }
    100%{
        .transform(scale(1, 1));
    }
}
@keyframes preloader-inside-white{
    0%{
        .transform(scale(0, 0));
    }
    100%{
        .transform(scale(1, 1));
    }
}
@-webkit-keyframes preloader-inside-red{
    0%{
        .transform(scale(0, 0));
    }
    30%{
        .transform(scale(0, 0));
    }
    100%{
        .transform(scale(1, 1));
    }
}
@keyframes preloader-inside-red{
    0%{
        .transform(scale(0, 0));
    }
    30%{
        .transform(scale(0, 0));
    }
    100%{
        .transform(scale(1, 1));
    }
}
/* Styles */
.preloader{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: white;
    text-align: center;

    .preloader-container{
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: auto;
        position: absolute;
        top: 44%;
        left: 0;
        position: relative;

        .animated-preloader{
            display: inline-block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: @red;
            .round(50em);

            &:after{
                content: '';
                display: inline-block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                .round(50em);
                background: white;
                -webkit-animation: preloader-inside-white 1s ease-in-out infinite;
                -ms-animation:     preloader-inside-white 1s ease-in-out infinite;
                animation:         preloader-inside-white 1s ease-in-out infinite;
            }
            &:before{
                content: '';
                display: inline-block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                .round(50em);
                background: @red;
                -webkit-animation: preloader-inside-red 1s ease-in-out infinite;
                -ms-animation:     preloader-inside-red 1s ease-in-out infinite;
                animation:         preloader-inside-red 1s ease-in-out infinite;
            }
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.