.loader {

    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:5px;
    position:fixed;
    width: 100px;
    height: 100px;

  }

  .background,
  .spinner {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 100%;
  }

  .background {
      border-radius: 100%;
      /* background-image: linear-gradient(0deg, #0f1013, #252730); */
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6),
        0 0px 4px 1px rgba(0, 0, 0, 0.3),
        0 1px 2px 1px rgba(0, 0, 0, 0) inset,
        0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
    }

    .logo {
      z-index: 2;
    }

    .spinner {
      border-radius: 50%;
      border-top: 2px solid #ae34db;


      box-shadow: 0 -4px 5px #ae34db4d;


      animation: spin 1s linear infinite;
    }

  .loader:before , .loader:after{
    content: '';
    border-radius: 50%;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
  }
  .loader:after {
    box-shadow: 0 2px 0 #4400ff inset;
    animation: rotate 2s linear infinite;
  }


  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }