tao-test/app/tao/views/scss/inc/_loading-bar.scss

65 lines
1.3 KiB
SCSS

@import 'inc/bootstrap';
$loadingBarBorder: whiten($darkBar, .4);
@mixin loading-gradient($color-1, $color-2) {
@include vendor-prefix(background, linear-gradient(to right, $color-2 0%, $color-1 20%, $color-1 80%, $color-2 100%), value);
}
@include keyframes(loadingbar) {
0% { left: -10% }
50% { left: 90% }
100% { left: -10% }
}
.loading-bar {
height: 6px;
position: absolute;
width: 100%;
top: 0px;
display:none;
z-index: 10000;
cursor: progress;
&.fixed {
position: fixed;
width: 100%;
&:before {
top: 0 !important;
}
}
&.loading {
display: block;
overflow: hidden;
top: 58px;
&:before {
position: absolute;
content: '';
height: 6px;
width: 20%;
display: block;
transform: translateZ(0);
@include loading-gradient($activeInteraction, transparent);
@include animation(loadingbar 5s linear infinite);
}
&.loadingbar-covered {
top: 0px;
overflow-y: visible;
&:before {
top: 86px;
}
}
}
}
.no-version-warning {
.loading-bar {
&.loadingbar-covered {
&:before {
top: 58px;
}
}
}
}