body
{
    height: 100vh;
    margin: 0;
}

.container-loader
{
    display         : flex;
    flex-direction  : column;
    width           : 100%;
    height          : 100%;
    justify-content : center;
    align-items     : center;
}

.container-loader.hide
{
    display: none;
}

.loader,
.loader:after
{
    border-radius   : 50%;
    width           : 10em;
    height          : 10em;
}
.loader
{
    margin              : 60px auto;
    font-size           : 10px;
    position            : relative;
    text-indent         : -9999em;
    border-top          : 1.1em solid #32404e; /* Black */
    border-right        : 1.1em solid #32404e; /* Black */
    border-bottom       : 1.1em solid #32404e; /* Black */
    border-left         : 1.1em solid #039be5; /* Blue */
    -webkit-transform   : translateZ(0);
    -ms-transform       : translateZ(0);
    transform           : translateZ(0);
    -webkit-animation   : loader-animation 1.1s infinite linear;
    animation           : loader-animation 1.1s infinite linear;
}

@-webkit-keyframes loader-animation
{
    0%
    {
        -webkit-transform   : rotate(0deg);
        transform           : rotate(0deg);
    }
    100%
    {
        -webkit-transform   : rotate(360deg);
        transform           : rotate(360deg);
    }
}
@keyframes loader-animation
{
    0%
    {
        -webkit-transform   : rotate(0deg);
        transform           : rotate(0deg);
    }
    100%
    {
        -webkit-transform   : rotate(360deg);
        transform           : rotate(360deg);
    }
}