loader

// Name:            Loader
// Description:     Animate loading
//
// Component:       `c-loader`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================

// Variables
// ========================================================================

$loader-size: spacing('base');
$loader-border-size: spacing('xxsmall');
$loader-radius: 50%;

// ========================================================================

.c-loader {

  // Custom properties
  // ========================================================================

  --loader-bg: #{$ui-02};
  --loader-animation: #{$ui-06};

  // ========================================================================
  @media (prefers-color-scheme: dark) {
    --loader-bg: #{$ui-03};
    --loader-animation: #{$ui-01};
  }

  // ========================================================================

  width: $loader-size;
  height: $loader-size;
  border: $loader-border-size solid var(--loader-bg);
  border-top: $loader-border-size solid var(--loader-animation);
  border-radius: $loader-radius;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

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