@c8y/style/styles/animations/_spinner-snake.less

Styles for Cumulocity IoT applications

/**
 * Spinner Snake - Rotating spinner/loader animation
 *
 * Note: Uses color tokens (@component-brand-primary; @body-background-color; @component-background-default).
 * Uses @size-16 for margin.
 *
 * Intentionally hardcoded values:
 * - em-based values (4em, 0.6em, 2.2em, etc.): Relative sizing for scalable spinner
 * - Animation durations (1s, 1.95s) and delays (0.75s): Animation timing
 * - Negative text-indent (-99999em): Text hiding technique
 * - Rotation degrees (0deg, 360deg): Animation angles
 * - Percentages: Keyframe positions
 */

.spinner-snake {
  position: relative;
  margin: @size-16 auto;
  width: 4em;
  height: 4em;
  min-width: 4em;
  min-height: 4em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.6em;
  color: @component-brand-primary;
  text-indent: -99999em;
  transform: translateZ(0) rotate(180deg);
  animation: rotator 1.95s infinite linear;
}

.spinner-snake:before {
  top: -0.1em;
  left: -0.1em;
  width: 2.2em;
  height: 4.2em;
  border-radius: 2.2em 0 0 2.2em;
  transform-origin: 2.2em 2.1em;
  animation: rotator 1s infinite ease 0.75s;
}

.spinner-snake:before,
.spinner-snake:after {
  position: absolute;
  background: @body-background-color;
  content: '';

  .card &,
  .modal &,
  .table-data-grid__loading--loader & {
    background: @component-background-default;
  }
}

.spinner-snake:after {
  top: -0.1em;
  left: 2.1em;
  width: 2.6em;
  height: 4.6em;
  border-radius: 0 2.2em 2.2em 0;
  transform-origin: 0 2.1em;
  animation: rotator 1s infinite ease;
}

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

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