@spaced-out/ui-design-system/lib/components/CircularLoader/CircularLoader.module.css

Sense UI components library

@value (colorFillPrimary, colorBackgroundTertiary, colorFillNone) from '../../styles/variables/_color.css';
@value (
  spaceNone
) from '../../styles/variables/_space.css';

@value (
  size5,
  size60
) from '../../styles/variables/_size.css';

@value (
  motionDurationSlowest
) from '../../styles/variables/_motion.css';

@value spinnerSize: size60;
@value spinnerThickness: size5;

@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - var(--spinner-thickness)), colorFillPrimary calc(100% - var(--spinner-thickness)));

.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  --spinner-size: spinnerSize;
  --spinner-thickness: spinnerThickness;
}

.mediumContainer {
  --spinner-size: calc(0.5 * spinnerSize);
  --spinner-thickness: calc(0.5 * spinnerThickness);
}

.smallContainer {
  --spinner-size: calc(0.36 * spinnerSize);
  --spinner-thickness: calc(0.36 * spinnerThickness);
}

.spinLoader {
  height: var(--spinner-size);
  width: var(--spinner-size);
  display: block;
  position: relative;
  animation: spin motionDurationSlowest linear 0s infinite normal;
  background: transparent;
}

.outerCircle {
  --color: colorFillPrimary;
  display: block;
  position: absolute;
  border-radius: calc(var(--spinner-size) / 2);
  height: var(--spinner-size);
  width: var(--spinner-size);
  top: spaceNone;
  right: spaceNone;
  background: conic-gradient(
    from 90deg at 50% 50%,
    colorFillNone 1deg,
    var(--color) 360deg
  );
  -webkit-mask: innerMaskGradient;
  mask: innerMaskGradient;
}

.ellipse {
  --color: colorFillPrimary;
  position: absolute;
  right: spaceNone;
  top: spaceNone;
  bottom: spaceNone;
  border-radius: calc(var(--spinner-thickness) / 2);
  height: var(--spinner-thickness);
  width: var(--spinner-thickness);
  margin: auto;
  background: var(--color);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}