6-structured_outputs/structured-outputs-math-tutor-starting-point/components/ui/spinner.css

:root {
  --spinner-color: #000000;
}

.flower-spinner,
.flower-spinner * {
  box-sizing: border-box;
}

.flower-spinner {
  height: 70px;
  width: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flower-spinner .dots-container {
  height: calc(70px / 7);
  width: calc(70px / 7);
}

.flower-spinner .smaller-dot {
  background: var(--spinner-color);
  height: 100%;
  width: 100%;
  border-radius: 50%;
  animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both;
}

.flower-spinner .bigger-dot {
  background: var(--spinner-color);
  height: 100%;
  width: 100%;
  padding: 10%;
  border-radius: 50%;
  animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both;
}

@keyframes flower-spinner-bigger-dot-animation {
  0%,
  100% {
    box-shadow:
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px;
  }

  50% {
    transform: rotate(180deg);
  }

  25%,
  75% {
    box-shadow:
      var(--spinner-color) 26px 0px 0px,
      var(--spinner-color) -26px 0px 0px,
      var(--spinner-color) 0px 26px 0px,
      var(--spinner-color) 0px -26px 0px,
      var(--spinner-color) 19px -19px 0px,
      var(--spinner-color) 19px 19px 0px,
      var(--spinner-color) -19px -19px 0px,
      var(--spinner-color) -19px 19px 0px;
  }

  100% {
    transform: rotate(360deg);
    box-shadow:
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px;
  }
}

@keyframes flower-spinner-smaller-dot-animation {
  0%,
  100% {
    box-shadow:
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px;
  }

  25%,
  75% {
    box-shadow:
      var(--spinner-color) 14px 0px 0px,
      var(--spinner-color) -14px 0px 0px,
      var(--spinner-color) 0px 14px 0px,
      var(--spinner-color) 0px -14px 0px,
      var(--spinner-color) 10px -10px 0px,
      var(--spinner-color) 10px 10px 0px,
      var(--spinner-color) -10px -10px 0px,
      var(--spinner-color) -10px 10px 0px;
  }

  100% {
    box-shadow:
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px,
      var(--spinner-color) 0px 0px 0px;
  }
}