storybookdesignpack/css/src/components/spinner.css

React components library project for censa Design System

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

@keyframes spin {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

.Spinner {
  animation: rotate 2s linear infinite;
}

.Spinner--small {
  height: var(--spacing-2);
  width: var(--spacing-2);
}

.Spinner--medium {
  height: var(--spacing-3);
  width: var(--spacing-3);
}

.Spinner--large {
  height: var(--spacing-4);
  width: var(--spacing-4);
}

.Circle {
  stroke-linecap: round;
  stroke-dasharray: 1 200;
  stroke-dashoffset: 0;
  animation: spin 1.5s ease-in-out infinite;
}

.Circle--primary {
  stroke: var(--primary);
}

.Circle--secondary {
  stroke: var(--primary);
}

.Circle--white {
  stroke: var(--primary);
}