// 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%;
  }
}