@patreon/studio/module/components/LoadingSpinner/LoadingSpinner.module.css

Patreon Studio Design System

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

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

@keyframes dash {
  0% {
    stroke-dashoffset: 162;
    transform: rotate(0deg);
  }

  50% {
    stroke-dashoffset: 90;
  }

  100% {
    stroke-dashoffset: 162;
    transform: rotate(360deg);
  }
}

.root {
  --LoadingSpinner-animation-speed: 1.8s;
  --LoadingSpinner-animation-speed-rotator: calc(var(--LoadingSpinner-animation-speed) * 0.62);
  --LoadingSpinner-animation-speed-dash: var(--LoadingSpinner-animation-speed);
  --LoadingSpinner-stroke-opacity: var(--LoadingSpinner-stroke-opacity-light);
}

.root.colorModeDark {
    --LoadingSpinner-stroke-opacity: var(--LoadingSpinner-stroke-opacity-dark);
  }

.root {

  animation: rotator var(--LoadingSpinner-animation-speed-rotator) linear infinite;
  display: block;
  height: var(--LoadingSpinner-size);
  margin-left: auto;
  margin-right: auto;
  overflow: visible !important; /* important is required to override the normalize.css rule */
  padding: 1.5px;
  width: var(--LoadingSpinner-size);
}

.circle {
  fill: none;
  stroke: var(--LoadingSpinner-background);
  stroke-opacity: var(--LoadingSpinner-stroke-opacity);
  stroke-width: var(--LoadingSpinner-stroke-width);
}

.arc {
  animation: dash var(--LoadingSpinner-animation-speed-dash) cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
  fill: none;
  stroke: var(--LoadingSpinner-foreground);
  stroke-dasharray: 180;
  stroke-width: var(--LoadingSpinner-stroke-width);
  transform-origin: center;
}

.sizeXxs {
  --LoadingSpinner-size: 10px;
  --LoadingSpinner-stroke-width: 16px;
}

.sizeXs {
  --LoadingSpinner-size: 16px;
  --LoadingSpinner-stroke-width: 12px;
}

.sizeSm {
  --LoadingSpinner-size: 24px;
  --LoadingSpinner-stroke-width: 8px;
}

.sizeMd {
  --LoadingSpinner-size: 32px;
  --LoadingSpinner-stroke-width: 6px;
}

.sizeLg {
  --LoadingSpinner-size: 48px;
  --LoadingSpinner-stroke-width: 4px;
}

.colorPrimary {
  --LoadingSpinner-background: var(--global-border-muted-default);
  --LoadingSpinner-foreground: var(--global-content-regular-default);
  --LoadingSpinner-stroke-opacity-dark: 1;
  --LoadingSpinner-stroke-opacity-light: 1;
}

.colorLight {
  --LoadingSpinner-background: var(--global-constant-white-default);
  --LoadingSpinner-foreground: var(--global-constant-white-default);
  --LoadingSpinner-stroke-opacity-dark: 0.19;
  --LoadingSpinner-stroke-opacity-light: 0.19;
}

.colorDark {
  --LoadingSpinner-background: var(--global-constant-black-default);
  --LoadingSpinner-foreground: var(--global-constant-black-default);
  --LoadingSpinner-stroke-opacity-dark: 0.09;
  --LoadingSpinner-stroke-opacity-light: 0.09;
}

.colorInverted {
  --LoadingSpinner-background: var(--global-inverted-regular-default);
  --LoadingSpinner-foreground: var(--global-inverted-regular-default);
  --LoadingSpinner-stroke-opacity-dark: 0.09;
  --LoadingSpinner-stroke-opacity-light: 0.19;
}

.colorActionBase {
  --LoadingSpinner-background: var(--global-rich-regular-default);
  --LoadingSpinner-foreground: var(--global-rich-regular-default);
  --LoadingSpinner-stroke-opacity-dark: 0.19;
  --LoadingSpinner-stroke-opacity-light: 0.09;
}

@media (prefers-color-scheme: dark) {

.root.colorModeAuto {
      --LoadingSpinner-stroke-opacity: var(--LoadingSpinner-stroke-opacity-dark);
  }
}