@atlassian/aui/src/less/aui-experimental-progress-indicator.less

Atlassian User Interface library

@import (reference) './imports/global';

@aui-progress-height: 6px;
@aui-progress-indicator-border-radius: 9999px;

aui-progressbar {
    display: block;
}

.aui-progress-indicator {
    background: var(--aui-progressbar-track-color);
    border-radius: @aui-progress-indicator-border-radius;
    height: @aui-progress-height;
    overflow: hidden;
    position: relative; /* so that animations work */
    width: 100%;
}

/* Indeterminate state: hide the value bar, use two pseudo-element bars instead */
.aui-progress-indicator::before,
.aui-progress-indicator::after {
    background: var(--aui-progressbar-color);
    border-radius: @aui-progress-indicator-border-radius;
    content: '';
    height: @aui-progress-height;
    position: absolute;
    will-change: left, right;
}

/* Secondary bar: slow, wide sweep */
.aui-progress-indicator::before {
    animation: aui-progress-secondary 2s infinite;
}

/* Primary bar: fast, narrow sweep */
.aui-progress-indicator::after {
    animation: aui-progress-primary 2s 0.5s infinite;
}

@keyframes aui-progress-secondary {
    0% {
        left: -5%;
        width: 5%;
    }
    to {
        left: 130%;
        width: 100%;
    }
}

@keyframes aui-progress-primary {
    0% {
        left: -80%;
        width: 80%;
    }
    to {
        left: 110%;
        width: 10%;
    }
}

/* Hide pseudo-elements and show value bar in determinate state */
.aui-progress-indicator[data-value]::before,
.aui-progress-indicator[data-value]::after {
    animation: none;
    display: none;
}

.aui-progress-indicator-value {
    border-radius: @aui-progress-indicator-border-radius;
    display: none; /* hidden in indeterminate state by default */
    height: @aui-progress-height;
    #aui.transition(none);
    position: absolute;
    width: 0;
    background: var(--aui-progressbar-color);
}

.aui-progress-indicator[data-value] .aui-progress-indicator-value {
    display: block;
    animation: none;
    left: 0;
    background: var(--aui-progressbar-color);
    border-radius: @aui-progress-indicator-border-radius;
    #aui.transition(width 0.2s);
}

.aui-progress-indicator-static[data-value] .aui-progress-indicator-value {
    animation: none;
    left: 0;
    #aui.transition(none);
}