lu2/theme/pure/css/common/ui/Progress.css

Simple and flexible UI component library based on native HTML and JavaScript

/**
 *
 * @Progress.css
 * @author zhangxinxu
 * @create 19-10-18
 *
**/
.ui-progress {
    display: inline-block;
    width: 10em; height: .25em;
    vertical-align: calc(.25em - 2px);
    border: 0;
    background-color: #d0d0d5;
    color: #2a80eb;
    border-radius: 1em;
    overflow: hidden;
}
.ui-progress::-moz-progress-bar {
    background-color: #2a80eb;
}
.ui-progress::-webkit-progress-bar {
    background-color: #d0d0d5;
}
.ui-progress::-webkit-progress-value {
    background-color: #2a80eb;
}

progress[width="100%"] {
    width: 100%;
}

/* For firefox to match no [value] */
.ui-progress:indeterminate::-moz-progress-bar {
    background-color: inherit;
}

/* remove IE black line */
.ui-progress::-ms-fill {
    border: none;
}

/* IE9 polyfill */
.ui-progress[role] {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}

.ui-progress[aria-valuenow]::before {
    background-color: #2a80eb;
}

/* Determinate only overrides */
.ui-progress[aria-valuenow] {
    background: #d0d0d5;
}

.ui-progress[aria-valuenow]::before {
    content: '';
    display: block;
    height: 100%;
}