<progress min="0" max="100"></progress>
<progress min="0" max="100" value="15"></progress>
<progress min="0" max="100" value="30" class="progress-success"></progress>
<progress min="0" max="100" value="45" class="progress-info"></progress>
<progress min="0" max="100" value="60" class="progress-primary"></progress>
<progress min="0" max="100" value="75" class="progress-warning"></progress>
<progress min="0" max="100" value="90" class="progress-danger"></progress>
/*Downloaded from https://www.codeseek.co/ayrtonvwf/cross-browser-progress-styling-JZWENR */
$progress-inner-shadow: 2px 2px 3px rgba(0,0,0,.5) inset;
$progress-border-radius: 3px;
@mixin progress-style() {
position: relative;
background-color: whitesmoke;
height: 20px;
border-radius: $progress-border-radius;
box-shadow: $progress-inner-shadow;
background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0,0,0,0.1) 33%, rgba(0,0,0,0.1) 66%, transparent 66%);
background-size: 35px 20px;
animation-duration: .5s;
animation-name: animate-indeterminate;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: none;
width: 100%;
}
@mixin progress-color($color) {
color: $color;
&::-webkit-progress-value {
background-color: $color;
}
&::-moz-progress-bar {
background-color: $color;
}
}
progress {
@include progress-style();
margin-bottom: 10px;
&::-ms-fill {
animation-name: none;
}
&::-webkit-progress-bar, &::after {
// this creates an animated overlay on webkit with progress:after
// styles applied to ::-webkit-progress-bar will be reset later
@include progress-style();
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0px;
background-color: transparent;
box-shadow: none;
}
&::-webkit-progress-bar {
@include progress-style();
background-image: none;
}
&::-moz-progress-bar {
@include progress-style();
}
&[value] {
background-image: none;
@include progress-color(gray);
&::-ms-fill {
box-shadow: $progress-inner-shadow;
border: none;
border-radius: $progress-border-radius;
}
&::-webkit-progress-bar, &::after {
background-image: none;
}
&::-webkit-progress-value {
box-shadow: $progress-inner-shadow;
border-radius: $progress-border-radius;
}
&::-moz-progress-bar {
background-image: none;
}
&.progress-success {
@include progress-color(green);
}
&.progress-info {
@include progress-color(lightblue);
}
&.progress-primary {
@include progress-color(blue);
}
&.progress-warning {
@include progress-color(orange);
}
&.progress-danger {
@include progress-color(red);
}
}
}
@keyframes animate-indeterminate {
from { background-position-x: 0px }
to { background-position-x: 35px }
}
/*Downloaded from https://www.codeseek.co/ayrtonvwf/cross-browser-progress-styling-JZWENR */