devextreme/less/sources/widgets/ios7/progressBar.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/progressBar.ios7.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@IOS7_BAR_HEIGHT: 7px;
@IOS7_BACKGROUND_WIDTH: 90%;

@IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT: -90deg, transparent 5%, @IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_COLOR, transparent 95%;
@IOS7_PROGRESSBAR_DISABLED_STATE_INTERDETERMINATE_STATE_GRADIENT: -90deg, transparent 5%, @IOS7_PROGRESSBAR_DISABLED_STATE_RANGE_COLOR, transparent 95%;

.dx-progressbar-range-container,
.dx-progressbar-animating-container {
    border-radius: @IOS7_BAR_HEIGHT;
    overflow: hidden;
}

.dx-progressbar-container {
    height: @IOS7_BAR_HEIGHT;
    background-color: @IOS7_PROGRESSBAR_CONTAINER_COLOR;
    border: 1px solid @IOS7_PROGRESSBAR_BORDER_COLOR;
}

.dx-progressbar-range {
    height: @IOS7_BAR_HEIGHT;
    top: -1px;
    position: relative;
    background-color: @IOS7_PROGRESSBAR_RANGE_COLOR;
}

.dx-progressbar-status {
    top: 1px;
}

.dx-progressbar-animating-container {
    height: @IOS7_BAR_HEIGHT;
    background-color: @IOS7_PROGRESSBAR_RANGE_COLOR;
    background-size: @IOS7_BACKGROUND_WIDTH @IOS7_BAR_HEIGHT;
    animation: loader 2s linear infinite;
    .gradient-linear(@IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT);

    background-repeat: repeat;
}

.dx-state-disabled {
    &.dx-progressbar {
        opacity: 1;
    }

    .dx-progressbar-range {
        background-color: @IOS7_PROGRESSBAR_DISABLED_STATE_RANGE_COLOR;
    }

    .dx-progressbar-animating-container {
        animation: none;
        .gradient-linear(@IOS7_PROGRESSBAR_DISABLED_STATE_INTERDETERMINATE_STATE_GRADIENT);

        background-repeat: repeat;
        background-color: @IOS7_PROGRESSBAR_CONTAINER_COLOR;
        background-position-x: @IOS7_BACKGROUND_WIDTH / 2;
    }
}

.dx-rtl {
    .dx-progressbar,
    &.dx-progressbar {
        .dx-progressbar-animating-container {
            animation: loader-rtl 1s linear infinite;
            .gradient-linear(@IOS7_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT);

            background-repeat: repeat;
        }
    }
}


@keyframes loader {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 900%;
    }
}

@keyframes loader-rtl {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -900%;
    }
}