Added loader as a common element

This commit is contained in:
xavijam 2016-01-14 18:44:27 +01:00
parent 6c5911b1e0
commit e04d8c0037

View File

@ -0,0 +1,41 @@
// 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 '../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%;
}
}