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

Styles for Cumulocity IoT applications

.spinner-snake {
  position: relative;
  margin: 16px 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);
  }
}