commit
c00ebeea7c
@ -17,28 +17,26 @@ This is the generic loader for widgets, maps, components, ...
|
|||||||
@import '../cdb-variables/sizes';
|
@import '../cdb-variables/sizes';
|
||||||
|
|
||||||
.CDB-Loader {
|
.CDB-Loader {
|
||||||
@include css3-prefix(animation, loader-progress 1000ms linear 1);
|
|
||||||
@include opacity(0);
|
|
||||||
@include transition(opacity, 1000ms);
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 50%;
|
||||||
height: 2px;
|
height: 3px;
|
||||||
background: rgba($cBlue, 1);
|
transform: translateX(-200%);
|
||||||
|
background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CDB-Loader.is-visible {
|
.CDB-Loader.is-visible {
|
||||||
@include css3-prefix(animation, loader-progress 2000ms linear infinite);
|
@include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
|
||||||
@include opacity(1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include keyframes(loader-progress) {
|
@include keyframes(loader-progress) {
|
||||||
0% {
|
from {
|
||||||
width: 0;
|
transform: translateX(-200%);
|
||||||
}
|
}
|
||||||
100% {
|
to {
|
||||||
width: 100%;
|
transform: translateX(200%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user