.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -21.5px;
    margin-top: -21.5px;
    width: 40px;
    height: 40px;
    border-radius: 80px;
    border: 3px solid transparent;
    border-left-color: rgba(33, 150, 243, 0.2);
    border-right-color: rgba(33, 150, 243, 0.2);
    -webkit-animation: spinnit 1s linear infinite;
            animation: spinnit 1s linear infinite;
  }
  
  .spinner:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 30px;
    height: 30px;
    border-radius: 60px;
    border: 3px solid transparent;
    border-left-color: rgba(33, 150, 243, 0.5);
    border-right-color: rgba(33, 150, 243, 0.5);
    animation: spinnit 0.5s linear infinite reverse;
  }
  
  .spinner:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    border: 3px solid transparent;
    border-left-color: rgba(33, 150, 243, 0.8);
    border-right-color: rgba(33, 150, 243, 0.8);
  }
  
  @-webkit-keyframes spinnit {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @keyframes spinnit {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }