@keyframes farmos-map-loading-spinner {
  to {
    transform: rotate(360deg);
  }
}

div.ol-viewport.loading-spinner::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 5px solid rgba(180, 180, 180, 0.6);
  border-top-color: var(--farmos-map-accent-color);
  animation: farmos-map-loading-spinner 1s linear infinite;
}