devextreme/less/sources/widgets/ios7/loadIndicator.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/loadIndicator.ios7.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-image {
    background-image: @IOS7_LOADINDICATOR_BACKGROUND;
}

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

    .dx-loadindicator-segment {
        position: absolute;
        width: 11%;
        height: 34%;
        left: 44.5%;
        top: 37%;
        opacity: 0;
        background: @IOS7_LOAD_INDICATOR_SEGMENT;
        border-radius: 80%;
        animation: dx-ios-loadindicator-opacity 1s linear infinite;
    }

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

        to {
            opacity: 0;
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .dx-loadindicator-segment12,
    .dx-loadindicator-segment13,
    .dx-loadindicator-segment14,
    .dx-loadindicator-segment15,
    .dx-loadindicator-segment16 {
        display: none;
    }
}

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