devextreme/less/sources/widgets/material/loadIndicator.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/loadIndicator.material.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;
    line-height: 100%;
}

.dx-loadindicator-content {
    height: 100%;
    width: 100%;
    animation: content-rotation 1568ms linear infinite;
}

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

    .dx-loadindicator-content {
        animation: none;
    }
}

.dx-loadindicator-icon {
    position: absolute;
    height: 100%;
    width: 100%;
    animation: icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.dx-loadindicator-segment {
    height: 100%;
    width: 100%;
    position: absolute;
}

.dx-loadindicator-segment-inner {
    position: relative;
    height: 100%;
    border-color: @load-indicator-segment-bg-color;
    border-width: 0.12em;
    border-style: solid;
    border-bottom-color: transparent;
    animation: none;
    border-radius: 50%;
}

.dx-loadindicator-segment2,
.dx-loadindicator-segment0 {
    width: 50%;
    height: 100%;
    overflow: hidden;

    .dx-loadindicator-segment-inner {
        width: 200%;
    }
}

.dx-loadindicator-segment2 {
    left: 0;

    .dx-loadindicator-segment-inner {
        border-right-color: transparent;
        transform: rotate(-129deg);
        animation: left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    }
}

.dx-loadindicator-segment0 {
    right: 0;

    .dx-loadindicator-segment-inner {
        left: -100%;
        border-left-color: transparent;
        transform: rotate(129deg);
        animation: right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    }
}

.dx-loadindicator-segment1 {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;

    .dx-loadindicator-segment-inner {
        width: 1000%;
        left: -450%;
    }
}

@keyframes content-rotation {
    to { transform: rotate(360deg); }
}

@keyframes icon-rotation {
    12.5% { transform: rotate(135deg); }
    25% { transform: rotate(270deg); }
    37.5% { transform: rotate(405deg); }
    50% { transform: rotate(540deg); }
    62.5% { transform: rotate(675deg); }
    75% { transform: rotate(810deg); }
    87.5% { transform: rotate(945deg); }
    to { transform: rotate(1080deg); }
}

@keyframes left-segment-rotation {
    from { transform: rotate(130deg); }
    50% { transform: rotate(-5deg); }
    to { transform: rotate(130deg); }
}

@keyframes right-segment-rotation {
    from { transform: rotate(-130deg); }
    50% { transform: rotate(5deg); }
    to { transform: rotate(-130deg); }
}