@keyframes loadColor {
    100%,
    0% {
        stroke: @colorNeutral10;
    }

    40% {
        stroke: @colorNeutral8;
    }

    66% {
        stroke: @colorNeutral7;
    }

    80%,
    90% {
        stroke: @colorNeutral6;
    }
}

mor-load{
    .loadfail{
        color: @colorNeutral8;

        .iconfont,
        .mo-icon{
            font-size: inherit;
        }
    }

    .loading{
        margin: 0;
        text-align: center;
        color: @colorNeutral8;

        > p{
            margin: 0.25em 0 0;
            font-size: @fontSize*0.8125;
        }
    }

    .mo-loader .mo-loader-path{
        animation: loaderDash 1.5s ease-in-out infinite, loadColor 3s ease-in-out infinite;
    }

    &.si-xxl {
        .mo-loader{
            width: 50px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*1.6;
        }
    }

    &.si-xl {
        .mo-loader{
            width: 38px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*1.3;
        }
    }

    &.si-l {
        .mo-loader{
            width: 28px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*1;
        }
    }

    &.si-m {
        .mo-loader{
            width: 22px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*0.875;
        }
    }

    &.si-s {
        .mo-loader{
            width: 18px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*0.875;
        }
    }

    &.si-xs {
        .mo-loader{
            width: 14px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*0.8125;
        }
    }

    &.si-xxs {
        .mo-loader{
            width: 12px;
        }

        .loadfail,
        .loading > p{
            font-size: @fontSize*0.75;
        }
    }

    // default status
    &{
        .si-m;
    }
}