@keyframes animatedBar{
    0%{
        opacity: .25;
    }
    100%{
        opacity: 1;
    }
 }

[loading] {
    position: relative;
    h1,h2,h3,h4,h5,h6, sc-text-area, &[blanket] {
        display: inline-block;
        position: relative;
        width: 50%;
        background: linear-gradient(to right, #eee , #fff);
        border-radius: @buttonRadius;
        color: rgba(0,0,0,0);
        animation: animatedBar 1200ms linear 1;
        >* {
            visibility: hidden;
        } 
    }

    sc-text-area {
        width: 100%;
        &::after {
            content: " ";
            position: absolute;
            top: ~"calc(50% - 25px)";
            left: ~"calc(50% - 25px)";
            background-image: url('spinner.svg');
            background-size: 50px 50px;
            height: 50px;
            width: 50px;
            opacity: 0.4;
            animation: fa-spin 0.5s infinite linear; 
        }
    }

    [skeleton] {
        background: linear-gradient(to right, #eee , #fff);
        height: 30px;
        &[small] {
            height: 30px;
            &[spin]{
                &::after {
                    content: " ";
                    position: absolute;
                    top: ~"calc(50% - 13px)";
                    left: ~"calc(50% - 13px)";
                    background-image: url('spinner.svg');
                    background-size: 26px 26px;
                    height: 26px;
                    width: 26px;
                    opacity: 0.4;
                    animation: fa-spin 0.5s infinite linear; 
                }
            }
        }
        &[medium] {
            height: 100px;
            &[spin]{
                &::after {
                    content: " ";
                    position: absolute;
                    top: ~"calc(50% - 20px)";
                    left: ~"calc(50% - 20px)";
                    background-image: url('spinner.svg');
                    background-size: 40px 40px;
                    height: 40px;
                    width: 40px;
                    opacity: 0.4;
                    animation: fa-spin 0.5s infinite linear; 
                }
            }
        }
        &[large] {
            height: 300px;
            &[spin]{
                &::after {
                    content: " ";
                    position: absolute;
                    top: ~"calc(50% - 25px)";
                    left: ~"calc(50% - 25px)";
                    background-image: url('spinner.svg');
                    background-size: 50px 50px;
                    height: 50px;
                    width: 50px;
                    opacity: 0.4;
                    animation: fa-spin 0.5s infinite linear; 
                }
            }
        }
        
        
    }

    &[blanket] {
        display: inherit;
    }
}