/* Spinner */
#spinner-overlay { /* just like the #overlay element */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/*
 * spinner animation styles copied from
 * shared/style/progress_activity.css
 */
#spinner {
  position: absolute;
  top: calc(50% - 1.5rem);
  left: calc(50% - 1.5rem);
  width: 2.9rem;
  height: 2.9rem;
  background: image-set(url("images/spinner.png") 1x, url("images/spinner@1.5x.png") 1.5x, url("images/spinner@2x.png") 2x, url("images/spinner@2.25x.png") 2.25x) no-repeat center center / 100%;
  animation: 0.9s spinner-animation infinite steps(30);
  border: none;
  z-index: 100;
}

#spinner-overlay.hidden {
  display: none;
}

@keyframes spinner-animation {
  from {
    transform: rotate(1deg);
  }
  to {
    transform: rotate(360deg);
  }
}