webawesome/source/css/loaders.css

/*! Loaders */

.loader {
  width: var(--loader-size);
  height: var(--loader-size);
  border-radius: 50%;
  border-style: solid;
  border-width: var(--loader-thickness);
  border-color: var(--loader-bg-color);
  border-top-color: var(--loader-color);
  border-left-color: var(--loader-color);
  display: inline-block;
  animation: loader var(--loader-speed) linear infinite;
  margin: var(--loader-margin-y) var(--loader-margin-x);
  vertical-align: middle;

  /* Sizes */
  &.loader-xs {
    width: var(--loader-size-xs);
    height: var(--loader-size-xs);
    border-width: var(--loader-thickness-xs);
  }

  &.loader-sm {
    width: var(--loader-size-sm);
    height: var(--loader-size-sm);
    border-width: var(--loader-thickness-sm);
  }

  &.loader-lg {
    width: var(--loader-size-lg);
    height: var(--loader-size-lg);
    border-width: var(--loader-thickness-lg);
  }

  &.loader-xl {
    width: var(--loader-size-xl);
    height: var(--loader-size-xl);
    border-width: var(--loader-thickness-xl);
  }

  /* Variations */
  &.loader-secondary {
    border-color: var(--loader-bg-color-secondary);
    border-top-color: var(--loader-color-secondary);
    border-left-color: var(--loader-color-secondary);
  }

  &.loader-success {
    border-color: var(--loader-bg-color-success);
    border-top-color: var(--loader-color-success);
    border-left-color: var(--loader-color-success);
  }

  &.loader-info {
    border-color: var(--loader-bg-color-info);
    border-top-color: var(--loader-color-info);
    border-left-color: var(--loader-color-info);
  }

  &.loader-warning {
    border-color: var(--loader-bg-color-warning);
    border-top-color: var(--loader-color-warning);
    border-left-color: var(--loader-color-warning);
  }

  &.loader-danger {
    border-color: var(--loader-bg-color-danger);
    border-top-color: var(--loader-color-danger);
    border-left-color: var(--loader-color-danger);
  }

  &.loader-light {
    border-color: var(--loader-bg-color-light);
    border-top-color: var(--loader-color-light);
    border-left-color: var(--loader-color-light);
  }

  &.loader-dark {
    border-color: var(--loader-bg-color-dark);
    border-top-color: var(--loader-color-dark);
    border-left-color: var(--loader-color-dark);
  }
}

/* Background loaders */
.loader-bg {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: calc(50% - var(--loader-size) / 2);
    left: calc(50% - var(--loader-size) / 2);
    width: var(--loader-size);
    height: var(--loader-size);
    border-radius: 50%;
    border-style: solid;
    border-width: var(--loader-thickness);
    border-color: var(--loader-bg-color);
    border-top-color: var(--loader-color);
    border-left-color: var(--loader-color);
    animation: loader var(--loader-speed) linear infinite;
  }

  /* Sizes */
  &.loader-bg-xs::after {
    top: calc(50% - var(--loader-size-xs) / 2);
    left: calc(50% - var(--loader-size-xs) / 2);
    width: var(--loader-size-xs);
    height: var(--loader-size-xs);
    border-width: var(--loader-thickness-xs);
  }

  &.loader-bg-sm::after {
    top: calc(50% - var(--loader-size-sm) / 2);
    left: calc(50% - var(--loader-size-sm) / 2);
    width: var(--loader-size-sm);
    height: var(--loader-size-sm);
    border-width: var(--loader-thickness-sm);
  }

  &.loader-bg-lg::after {
    top: calc(50% - var(--loader-size-lg) / 2);
    left: calc(50% - var(--loader-size-lg) / 2);
    width: var(--loader-size-lg);
    height: var(--loader-size-lg);
    border-width: var(--loader-thickness-lg);
  }

  &.loader-bg-xl::after {
    top: calc(50% - var(--loader-size-xl) / 2);
    left: calc(50% - var(--loader-size-xl) / 2);
    width: var(--loader-size-xl);
    height: var(--loader-size-xl);
    border-width: var(--loader-thickness-xl);
  }

  /* Variations */
  &.loader-bg-secondary::after {
    border-color: var(--loader-bg-color-secondary);
    border-top-color: var(--loader-color-secondary);
    border-left-color: var(--loader-color-secondary);
  }

  &.loader-bg-success::after {
    border-color: var(--loader-bg-color-success);
    border-top-color: var(--loader-color-success);
    border-left-color: var(--loader-color-success);
  }

  &.loader-bg-info::after {
    border-color: var(--loader-bg-color-info);
    border-top-color: var(--loader-color-info);
    border-left-color: var(--loader-color-info);
  }

  &.loader-bg-warning::after {
    border-color: var(--loader-bg-color-warning);
    border-top-color: var(--loader-color-warning);
    border-left-color: var(--loader-color-warning);
  }

  &.loader-bg-danger::after {
    border-color: var(--loader-bg-color-danger);
    border-top-color: var(--loader-color-danger);
    border-left-color: var(--loader-color-danger);
  }

  &.loader-bg-light::after {
    border-color: var(--loader-bg-color-light);
    border-top-color: var(--loader-color-light);
    border-left-color: var(--loader-color-light);
  }

  &.loader-bg-dark::after {
    border-color: var(--loader-bg-color-dark);
    border-top-color: var(--loader-color-dark);
    border-left-color: var(--loader-color-dark);
  }
}

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