28 lines
614 B
Plaintext
28 lines
614 B
Plaintext
|
// Much learning from:
|
||
|
|
// http://css-tricks.com/html5-progress-element/
|
||
|
|
@progress-height: .25rem;
|
||
|
|
|
||
|
|
progress {
|
||
|
|
height: @progress-height;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
background-color: fade(@text-color, 10%);
|
||
|
|
-webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
|
||
|
|
}
|
||
|
|
|
||
|
|
progress::-webkit-progress-bar {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
progress::-webkit-progress-value {
|
||
|
|
background-color: @base-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
progress[value] {
|
||
|
|
-webkit-animation: none;
|
||
|
|
}
|
||
|
|
@-webkit-keyframes animate-stripes {
|
||
|
|
100% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
}
|