Added loader as a common element
This commit is contained in:
parent
6c5911b1e0
commit
e04d8c0037
41
src/scss/components/loader.scss
Normal file
41
src/scss/components/loader.scss
Normal 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%;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user