devextreme/less/sources/widgets/generic/loadIndicator.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/loadIndicator.generic.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/

.dx-loadindicator {
    background-color: transparent;
}

.dx-loadindicator-image {
    background-image: @loadindicator-image-bg;
}

.dx-loadindicator-icon {
    position: relative;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;

    .dx-loadindicator-segment {
        position: absolute;
        width: 19%;
        height: 30%;
        left: 44.5%;
        top: 37%;
        opacity: 0;
        background: @loadindicator-bg;
        border-radius: 50%;
        border-top-left-radius: 10%;
        border-top-right-radius: 10%;
        box-shadow: 0 0 3px @loadindicator-segment-shadow-color;
        animation: dx-generic-loadindicator-opacity 1s linear infinite;
    }

    @keyframes dx-generic-loadindicator-opacity {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.55;
        }
    }

    .dx-loadindicator-segment0 {
        transform: rotate(0deg) translate(0, -142%);
        animation-delay: 0s;
    }

    .dx-loadindicator-segment1 {
        transform: rotate(45deg) translate(0, -142%);
        animation-delay: -0.875s;
    }

    .dx-loadindicator-segment2 {
        transform: rotate(90deg) translate(0, -142%);
        animation-delay: -0.75s;
    }

    .dx-loadindicator-segment3 {
        transform: rotate(135deg) translate(0, -142%);
        animation-delay: -0.625s;
    }

    .dx-loadindicator-segment4 {
        transform: rotate(180deg) translate(0, -142%);
        animation-delay: -0.5s;
    }

    .dx-loadindicator-segment5 {
        transform: rotate(225deg) translate(0, -142%);
        animation-delay: -0.375s;
    }

    .dx-loadindicator-segment6 {
        transform: rotate(270deg) translate(0, -142%);
        animation-delay: -0.25s;
    }

    .dx-loadindicator-segment7 {
        transform: rotate(315deg) translate(0, -142%);
        animation-delay: -0.125s;
    }

    .dx-loadindicator-segment8,
    .dx-loadindicator-segment9,
    .dx-loadindicator-segment10,
    .dx-loadindicator-segment11,
    .dx-loadindicator-segment12,
    .dx-loadindicator-segment13,
    .dx-loadindicator-segment14,
    .dx-loadindicator-segment15 {
        display: none;
    }
}

.dx-rtl .dx-loadindicator-icon {
    right: 15%;
    left: 0;
}