// Loader styles
// ----------------------------------------------

/* SG
# Loader/principal

This is the generic loader for widgets, maps, components, ...

```
<div class="CDB-Loader is-visible"></div>

```
*/

.CDB-Loader {
  position: absolute;
  top: 0;
  left: 0;
  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 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
}

@include keyframes(loader-progress) {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(200%);
  }
}

/* SG
# Loader/circle

```
<div style="padding: 20px;">
  <div class="CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>

  <div class="CDB-LoaderIcon is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #F9F9F9;">
  <div class="CDB-LoaderIcon is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-LoaderIcon">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #E27D61;">
  <div class="CDB-LoaderIcon">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

```
*/
.CDB-LoaderIcon {
  width: 16px;
  height: 16px;
}

.CDB-LoaderIcon-spinner {
  animation: rotate 2s linear infinite;
  width: 16px;
  height: 16px;
}

.CDB-LoaderIcon--small,
.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
  width: 14px;
  height: 14px;
}

.CDB-LoaderIcon--big,
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
  width: 40px;
  height: 40px;
}

.CDB-LoaderIcon-path {
  stroke: rgba(255, 255, 255, 0.88);
  stroke-linecap: round;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-width: 4px;
}

.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
  stroke-width: 2px;
}

.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
  stroke: rgba(0, 0, 0, 0.24);
}

.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
  stroke: $cBlue;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}