.spin-canvas {

  left: 0;
  top: 0;
  z-index: 10;
  margin: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.03);

  &.spin-center {

    .spin-message {

      color: $oa-gray;
      text-align: center;
      position: absolute;
      width: 220px;
      margin-left: -110px;
      top: -50px;
      padding: 90px 20px 30px;
      background: $oa-white;
      border-radius: 5px;

    }

  }

  &.spin-page {

    position: fixed;

  }

  &.spin-inline {

    position: relative;
    line-height: 1em;
    width: 1em;
    display: inline-block;
    background: transparent;

    > span {
      display: inline-block;
    }

    .spinner {

      @keyframes spinner-line-fade-more {
        0%, 100% {
          opacity: 0; /* minimum opacity */
        }
        1% {
          opacity: 1;
        }
      }

      @keyframes spinner-line-fade-quick {
        0%, 39%, 100% {
          opacity: 0.25; /* minimum opacity */
        }
        40% {
          opacity: 1;
        }
      }

      @keyframes spinner-line-fade-default {
        0%, 100% {
          opacity: 0.22; /* minimum opacity */
        }
        1% {
          opacity: 1;
        }
      }

    }

    & + .spin-message {

      margin-left: .3em;
      color: $oa-gray-light;

    }

  }

}