mediawiki-extensions-Multim.../resources/mmv/ui/mmv.ui.progressBar.less
Gilles Dubuc 69e75bcda8 Bigger, badder, animated progress bar
Nobody will be able to say it's not prominent enough anymore.

Change-Id: I060dcf2b8f244f7d59f4ed1ef6dfd85a08f3ef88
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/464
2014-04-22 15:16:56 -07:00

48 lines
1.1 KiB
Plaintext

@import "mediawiki.mixins.animation";
@progress-height: 14px;
.mw-mmv-progress {
width: 100%;
height: @progress-height;
background-color: #cccccc;
background-color: rgba( 221, 221, 221, 0.5 );
margin-top: -@progress-height;
}
.mw-mmv-progress.empty {
display: none;
}
.mw-mmv-progress-percent {
width: 0;
height: @progress-height;
background: linear-gradient(-45deg, transparent 33%, rgba(0,0,0,0.1) 33%, rgba(0,0,0,0.1) 66%, transparent 66%), #347bff;
background-size: 35px 20px, 100% 100%, 100% 100%;
.animation( mw-mmv-progress-percent-animation 1.5s linear infinite );
}
.mw-mmv-progress-percent-animation() {
0% {
background-position: 0px 0px;
}
100% {
background-position: -70px 0px;
}
}
@-webkit-keyframes mw-mmv-progress-percent-animation {
.mw-mmv-progress-percent-animation;
}
@-moz-keyframes mw-mmv-progress-percent-animation {
.mw-mmv-progress-percent-animation;
}
@-o-keyframes mw-mmv-progress-percent-animation {
.mw-mmv-progress-percent-animation;
}
@keyframes mw-mmv-progress-percent-animation {
.mw-mmv-progress-percent-animation;
}