Skip to content
Permalink
master
Go to file
 
 
Cannot retrieve contributors at this time
89 lines (71 sloc) 2.08 KB
// HTML progress element
// the progress element represents
// the completion progress of a task.
.progress {
--bar-border-color: var(--color-shadow-1);
--value-color: var(--color-bg-3, var(--color-main-3));
--background-color: var(--color-bg-1, var(--color-main-1));
outline: none;
appearance: none;
background-color: var(--background-color);
border: var(--border-width, var(--space-px)) solid; // when not inside box
display: block;
width: 100%;
min-height: 20px;
border-color: var(--color-main-5);
color: var(--value-color); // MS Edge background color of bar
&::-webkit-progress-bar { background-color: transparent }
&::-webkit-progress-value { background-color: var(--value-color); @include stop-border-r }
&::-moz-progress-bar { background-color: var(--value-color); @include stop-border-r }
//&:-ms-fill { background-color: var(--value-color); @include stop-border-r }
// as long as no value is given
// show animation waiting for progress bar
// MS Edge has a cutsom animation
position: relative;
overflow: hidden;
&:not([value]):after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
background: linear-gradient(
to left,
var(--background-color),
var(--color-main-3),
var(--background-color)
);
background-size: 100% 100%;
animation: scroll-background 4s infinite alternate;
//animation-fill-mode: both;
//transition-timing-function: ease;
}
&::-ms-fill { border: none }
}
// Animation for indeterminate
@keyframes scroll-background {
0% { transform: translateX(90%); }
100% { transform: translateX(-90%); }
}
.progress-box {
position: relative;
padding: var(--padding, var(--space-s));
--border-width: var(--space-px);
border: var(--border-width) solid;
@include min-height;
> *:not(.progress) {
position: relative;
z-index: 1;
}
.progress {
position: absolute;
border: 0;
top: 0px;
bottom: 0;
left: 0;
height: 100%;
z-index: 0;
}
}
You can’t perform that action at this time.