.ProgressSpinner {
  position: relative;
  z-index: 1;
  width: 3.375rem;
  height: 3.375rem;
  background: rgba(0, 0, 0, .25) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjcxNyA5Ljc1TDE4LjMgMi4xNjdhLjY4NC42ODQgMCAxMC0uOTY3LS45NjdMOS43NSA4Ljc4MyAyLjE2NyAxLjJhLjY4NC42ODQgMCAxMC0uOTY3Ljk2N0w4Ljc4MyA5Ljc1IDEuMiAxNy4zMzNhLjY4NC42ODQgMCAxMC45NjcuOTY3bDcuNTgzLTcuNTgzIDcuNTgzIDcuNTgzYS42ODEuNjgxIDAgMDAuOTY3IDAgLjY4NC42ODQgMCAwMDAtLjk2N0wxMC43MTcgOS43NXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii43NSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) no-repeat 49% 49%;
  border-radius: 50%;
  cursor: pointer;

  &.no-cross {
    background: transparent !important;
    pointer-events: none;
  }

  &.square {
    background-image: none;

    &::after {
      content: '';
      position: absolute;
      width: .8125rem;
      height: .8125rem;
      border-radius: .125rem;
      background-color: #fff;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    }
  }

  &.size-s, &.size-m {
    width: auto;
    height: auto;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) no-repeat 49% 49%;

    &.square {
      background-image: none;
      width: .75rem;
      height: .75rem;
    }
  }

  &.size-xl {
    width: 3.25rem;
    height: 3.25rem;

    svg {
      width: 3rem;
      height: 3rem;
      margin: .125rem;
    }

    circle {
      stroke-width: 3px;
    }
  }

  &.transparent {
    background-color: transparent !important;
  }

  svg {
    display: block;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: 4s linear 0s infinite ProgressSpinnerAnimation;
  }

  circle {
    transition: stroke-dashoffset .5s;
  }
}

@keyframes ProgressSpinnerAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}