CartoAssets/src/scss/cdb-components/loader.scss

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

/* SG
# Loader/principal

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

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

```
*/

@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';

.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($cBlue, 1);
  z-index: 2;
}
.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%;
  }
}

/* SG
# Loader/circle

```
<div style="padding: 20px;">
  <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 class="CDB-LoaderIcon CDB-LoaderIcon--medium 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--medium 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--medium">
    <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--medium">
    <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-spinner {
  animation: rotate 2s linear infinite;
  width: 16px;
  height: 16px;
}

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

.CDB-LoaderIcon--medium .CDB-LoaderIcon-spinner {
  width: 24px;
  height: 24px;
}

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

.CDB-LoaderIcon-path {
  stroke: rgba(255, 255, 255, 0.88);
  stroke-linecap: round;
  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);
}

@keyframes rotate {
  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;
  }
}