42 lines
792 B
SCSS
42 lines
792 B
SCSS
// Loader styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Loader
|
|
|
|
This is the generic loader for widgets, maps, components, ...
|
|
There is only one state 'is-visible', in order to make it visible.
|
|
|
|
```
|
|
<div class="CDB-Loader is-visible"></div>
|
|
```
|
|
*/
|
|
|
|
@import '../cdb-utilities/mixins';
|
|
|
|
.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(#3AA9E3, 1);
|
|
z-index: 10;
|
|
}
|
|
.CDB-Loader.is-visible {
|
|
@include css3-prefix(animation, loader-progress 2000ms linear infinite);
|
|
@include opacity(1);
|
|
}
|
|
|
|
@include keyframes(loader-progress) {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|