/* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with position:fixed. Width, height, top and left speak
       for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */


    .preloader {
        display:    none;
        position:   fixed;
        z-index:    1000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: #ecf0f5
        url('/public/img/preloader-flowing-gradient-blue.gif')
        50% 50%
        no-repeat;
        opacity: 0.5;
        z-index: 1021;
    }


    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .preloader {
        overflow: hidden;
    }

    /* Anytime the body has the loading class, our
       preloader element will be visible */
    body.loading .preloader {
        display: block;
    }