.spring-spinner, .spring-spinner * {
      box-sizing: border-box;
    }

    .spring-spinner {
      height: 120px;
      width: 120px;
    }

    .spring-spinner .spring-spinner-part {
      overflow: hidden;
      height: calc(120px / 2);
      width: 120px;
    }

    .spring-spinner  .spring-spinner-part.bottom {
       transform: rotate(180deg) scale(-1, 1);
     }

    .spring-spinner .spring-spinner-rotator {
      width: 120px;
      height: 120px;
      border: calc(120px / 7) solid transparent;
      border-right-color: #ffffff;
      border-top-color: #ffffff;
      border-radius: 50%;
      box-sizing: border-box;
      animation: spring-spinner-animation 3s ease-in-out infinite;
      transform: rotate(-200deg);
    }

    @keyframes spring-spinner-animation {
      0% {
        border-width: calc(120px / 7);
      }
      25% {
        border-width: calc(120px / 23.33);
      }
      50% {
        transform: rotate(115deg);
        border-width: calc(120px / 7);
      }
      75% {
        border-width: calc(120px / 23.33);
      }
      100% {
        border-width: calc(120px / 7);
      }
    }
    
    #overlaySpinner {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 1100;
      cursor: pointer;
    }
    
    #textSpinner{
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 50px;
      color: white;
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
    }