catalog-ui/app/styles/layout/main.less

.full-height {
    height: 100%;
    background-color: @main_color_l
}

.w-sdc-main-container {
    position: absolute;
    top: @header_height + @top_nav_height;
    left: 0;
    right: 0;
    bottom: 0;

    .w-sdc-main-right-container {
        .bg_n;
        bottom: 0;
        padding: 22px 12px;
        position: absolute;
        left: 240px;
        right: 0;
        top: 0;
        overflow: hidden;


        & > div:first-child { /* scroll fix */
            padding-bottom: 80px;
        }
    }
}

.sdc-loading-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;

    .caption1 {
        .p_24;
        text-align: center;
    }

    .caption2 {
        .p_16_m;
        display: block;
    }
}

.main-loader {
    @green: #cccccc;
    @blue: #dddddd;
    @red: #eeeeee;
    @yellow: #bbbbbb;
    @white: #ffffff;

    @width: 80px;

    .loader {
        position: relative;
        margin: 0px auto;
        width: @width;
        &:before {
            content:'';
            display: block;
            padding-top: 100%;
        }
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin: auto;
    }


    .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation:
        dash 1.5s ease-in-out infinite,
        color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate{
        100%{
            transform: rotate(360deg);
        }
    }
    @keyframes dash{
        0%{
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0;
        }
        50%{
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35px;
        }
        100%{
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color{
        100%, 0%{
            stroke: @red;
        }
        40%{
            stroke: @blue;
        }
        66%{
            stroke: @green;
        }
        80%, 90%{
            stroke: @yellow;
        }
    }

}