.spinner-wrapper {
  transition: background-color 1200ms ease-out;

  &.is-block {
    width: auto;
    position: absolute;
    z-index: 99999;
    background-color: rgba(#fff, 1.0);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    //left: 50%;
    //top: 50%;
    //transform: translate(-50%, -50%);
  }

  &.is-fixed {
    background-color: rgba(#fff, 1.0);
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &.reverse,
  &.dismissed {
    background-color: rgba(#fff, 0.0);
  }

  &.dismissed {
    position: fixed;
    width: 0;
    height: 0;
    left: -10000px;
    top: -10000px;
    right: auto;
    bottom: auto;
    overflow: hidden;
  }
}

.spinner-wrapper,
.spinner {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.spinner {
  padding: 10rpx;
  opacity: 1;
  transition: opacity 1200ms ease-out;

  &.reverse,
  &.dismissed {
    opacity: 0;
  }
}

.spinner-icon {
  width: 38px;
  height: 38px;
  animation: spinner-rotation 600ms linear infinite;
}

@keyframes spinner-rotation {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}