devextreme/less/sources/widgets/common/loadIndicator.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/loadIndicator.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/
*/
@LOADINDICATOR_WIDTH: 32px;
@LOADINDICATOR_HEIGHT: 32px;

.dx-loadindicator {
    width: @LOADINDICATOR_WIDTH;
    height: @LOADINDICATOR_HEIGHT;
    display: inline-block;
    overflow: hidden;
    border: none;
    background-color: transparent;
}

.dx-loadindicator-wrapper {
    width: 100%;
    height: 100%;
    font-size: @LOADINDICATOR_HEIGHT;
    margin: auto;
}

.dx-loadindicator-image {
    background-size: contain;
    transform-origin: 50% 50%;
    background-position: 50%;
    background-repeat: no-repeat;
}

.dx-loadindicator-icon {
    direction: ltr;
}

.dx-loadindicator-icon-custom {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    transform-origin: 50% 50%;
    animation: dx-loadindicator-icon-custom-rotate 1.5s infinite linear;

    @keyframes dx-loadindicator-icon-custom-rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

.dx-loadindicator-container {
    > .dx-loadindicator {
        top: 50%;
        left: 50%;
        position: absolute;
        margin-top: -1 * @LOADINDICATOR_HEIGHT / 2;
        margin-left: -1 * @LOADINDICATOR_WIDTH / 2;

        &.dx-loadindicator {
            margin-top: -1 * @LOADINDICATOR_HEIGHT / 2;
            margin-left: -1 * @LOADINDICATOR_WIDTH / 2;
        }
    }
}

.dx-loadindicator-content {
    width: 100%;
    height: 100%;
    position: relative;
}