.spinner{
    display: inline flow-root;
    justify-content: center;
    align-items: center;
    * {
      line-height: 0;
      box-sizing: border-box;
    }
  }
  .spinner-inner
  {
    width: 50px;
    height: 26px;
    flex-shrink: 0;
  }
  .loader-xbox, .loader-xbox:before, .loader-xbox:after {
    position: absolute;
    border: 3px solid transparent;
    border-top: 3px solid #41b883;
    border-radius: 50%;
    animation: rotate linear infinite;
    content: '';
  }
  .loader-xbox {
    height: 50px;
    width: 50px;
    animation-duration: 1.05s;
  }
  .loader-xbox:before {
    height: 37px;
    width: 37px;
    top: 5px;
    left: 5px;
    border-top: 3px solid #f7484e;
    animation-duration: 10s;
  }
  .loader-xbox:after {
    height: 25px;
    width: 25px;
    top: 11px;
    left: 11px;
    border-top: 3px solid #f8b334;
    animation-duration: 4s;
  }
  @keyframes rotate {
    from {
      transform: rotateZ(360deg);
    }
    to {
      transform: rotateZ(0deg);
    }
  }