@import "compass";
@import "animation";
$progress-color: #17f29b;
$progress-duration: 1s;
.jQuery-plainOverlay-progress {
@include box-sizing(border-box);
width: 100%;
height: 100%;
border-top: 3px solid $progress-color;
@include border-radius(50%);
@include anim-init;
@include animation-name(jQuery-plainOverlay-spin);
@include animation-duration($progress-duration);
@include animation-timing-function(linear);
@include animation-iteration-count(infinite);
}
@include keyframes(jQuery-plainOverlay-spin) {
from { @include transform(rotate(0deg)); }
to { @include transform(rotate(360deg)); }
}
.jQuery-plainOverlay-progress-legacy {
width: 100%;
height: 50%;
padding-top: 25%;
text-align: center;
white-space: nowrap;
// Clearfix
&:before, &:after {
content: " ";
display: table;
}
&:after { clear: both; }
*zoom: 1;
div {
width: 18%;
height: 100%;
margin: 0 1%;
background-color: $progress-color;
float: left;
visibility: hidden;
}
}
// 1>1
.jQuery-plainOverlay-progress-1 div.jQuery-plainOverlay-progress-1,
// 2>1, 2>2
.jQuery-plainOverlay-progress-2 div.jQuery-plainOverlay-progress-1,
.jQuery-plainOverlay-progress-2 div.jQuery-plainOverlay-progress-2,
// 3>1, 3>2, 3>3
.jQuery-plainOverlay-progress-3 div.jQuery-plainOverlay-progress-1,
.jQuery-plainOverlay-progress-3 div.jQuery-plainOverlay-progress-2,
.jQuery-plainOverlay-progress-3 div.jQuery-plainOverlay-progress-3
{ visibility: visible; }