Loader
{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    .indicator
    {
        border-radius: 3px;
        opacity: 1.0;
        transition: all 1.0s 0.2s linear;
        padding: 2px;
        font-size: 50px;

        animation-name: loader-spin;
        animation-duration: 0.4s;
        animation-timing-function: ease;
        animation-direction: alternate;
        animation-iteration-count: infinite;

        &:intro
        {
            opacity: 0.0;
        }

        .progress
        {
            background-color: #fff4;
            border-radius: 2px;
            height: 100%;
        }
    }
}


@keyframes loader-spin
{
    0%
    {
        transform: rotate( -90deg );
        color: #fff4;
    }

    100%
    {
        transform: rotate( 90deg );
        color: #fff6;
    }
}