nishant-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 innerCircleSize: calc(spinnerSize - 2 * spinnerThickness);

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

.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.mediumContainer {
  transform: scale(0.5);
}

.smallContainer {
  transform: scale(0.36);
}

.spinLoader {
  height: spinnerSize;
  width: spinnerSize;
  display: block;
  position: relative;
  animation: spin motionDurationSlowest linear 0s infinite normal;
  background: transparent;
}

.outerCircle {
  --color: colorFillPrimary;
  display: block;
  position: absolute;
  border-radius: calc(spinnerSize/2);
  height: spinnerSize;
  width: spinnerSize;
  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;
  left: calc(spinnerSize - spinnerThickness);
  right: spaceNone;
  top: spaceNone;
  bottom: spaceNone;
  border-radius: calc(spinnerThickness/2);
  height: spinnerThickness;
  width: spinnerThickness;
  margin: auto;
  background: var(--color);
}

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