devextreme/less/sources/widgets/material/progressBar.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/progressBar.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-size-default() {
    @MATERIAL_PROGRESSBAR_STATUS_PADDING: 8px;
}

.dx-size-compact() {
    @MATERIAL_PROGRESSBAR_STATUS_PADDING: 4px;
}

@MATERIAL_BAR_HEIGHT: 4px;
@MATERIAL_BACKGROUND_WIDTH: 90%;
@MATERIAL_PROGRESSBAR_INTERDETERMINATE_STATE_GRADIENT: -90deg, transparent 5%, @progressbar-range-indeterminate-color, transparent 95%;

.dx-progressbar-container {
    height: @MATERIAL_BAR_HEIGHT;
    background-color: @progressbar-bg;
}

.dx-progressbar-range {
    position: relative;
    background-color: @progressbar-range-bg;
    margin-top: -1px;
    box-sizing: content-box;
}

.dx-progressbar-animating-container {
    height: @MATERIAL_BAR_HEIGHT;
    background-color: @progressbar-bg;
    background-size: @MATERIAL_BACKGROUND_WIDTH 5px;
    animation: loader 2s linear infinite;
    .gradient-linear(@MATERIAL_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: @MATERIAL_BACKGROUND_WIDTH / 2;
    }
}

.dx-progressbar-status {
    padding-top: @MATERIAL_PROGRESSBAR_STATUS_PADDING;
    color: @progressbar-label-color;

    .dx-progressbar .dx-position-right & {
        padding-top: 0;
    }
}

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