devextreme/less/sources/widgets/generic/progressBar.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/progressBar.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/
*/
@GENERIC_BAR_HEIGHT: 6px;
@GENERIC_BACKGROUND_WIDTH: 90%;
@GENERIC_PROGRESSBAR_BORDER_RADIUS: 2px;
@GENERIC_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT: -90deg, transparent 5%, @progressbar-range-indeterminate-color, transparent 95%;
@GENERIC_PROGRESS_BAR_BORDER: 1px solid @progressbar-border-color;

.dx-progressbar-container {
    height: @GENERIC_BAR_HEIGHT;
    border: @GENERIC_PROGRESS_BAR_BORDER;
    background-color: @progressbar-bg;
    border-radius: @GENERIC_PROGRESSBAR_BORDER_RADIUS;
}

.dx-progressbar-range {
    position: relative;
    border: 1px solid @progressbar-range-border-color;
    background-color: @progressbar-range-bg;
    margin-top: -1px;
    box-sizing: content-box;
    border-top-left-radius: @GENERIC_PROGRESSBAR_BORDER_RADIUS;
    border-bottom-left-radius: @GENERIC_PROGRESSBAR_BORDER_RADIUS;
}

.dx-progressbar-animating-container {
    height: @GENERIC_BAR_HEIGHT;
    background-color: @progressbar-bg;
    background-size: @GENERIC_BACKGROUND_WIDTH 5px;
    border: @GENERIC_PROGRESS_BAR_BORDER;
    border-radius: @GENERIC_PROGRESSBAR_BORDER_RADIUS;
    animation: loader 2s linear infinite;
    .gradient-linear(@GENERIC_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT);

    background-repeat: repeat;
}

.dx-state-disabled {
    .dx-progressbar-range {
        background-color: @progressbar-range-disabled-bg;
    }

    .dx-progressbar-animating-container {
        animation: none;
        background-position-x: @GENERIC_BACKGROUND_WIDTH / 2;
    }
}

.dx-rtl {
    .dx-progressbar,
    &.dx-progressbar {
        .dx-progressbar-animating-container {
            animation: loader-rtl 2s linear infinite;
            .gradient-linear(@GENERIC_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%;
    }
}