change loader

This commit is contained in:
piensaenpixel 2017-03-07 12:14:22 +01:00
parent c989154ff5
commit 9de6ac6f4b

View File

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