.container-preloader {
  position: fixed; /* full screen overlay */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white; /* or any background you prefer */
  z-index: 9999;
}

      .wrapper {
          justify-content: center;
          align-items: center;
          position: relative;
          /* width: 100px;
          height: 100px; */
          
      }

      .loader {
          position: absolute;
          height: 25px;
          width: 1px;
          animation: rotate 3.5s linear infinite;
      }

      .loader .circle {
          position: absolute;
          top: 30px;
          left: 50%;
          transform: translateX(-50%);
          height: 7px;
          width: 7px;
          background: hsl(255, 90.50%, 41.40%);
          border-radius: 50%;
      }

      @keyframes rotate {
          30% { transform: rotate(220deg); }
          40% { transform: rotate(450deg); }
          75% { transform: rotate(720deg); opacity: 1; }
          76% { opacity: 0; }
          100% { opacity: 0; transform: rotate(0deg); }
      }

      .loader:nth-child(1) {
          animation-delay: 0.15s;
      }

      .loader:nth-child(2) {
          animation-delay: 0.3s;
      }

      .loader:nth-child(3) {
          animation-delay: 0.45s;
      }

      .loader:nth-child(4) {
          animation-delay: 0.6s;
      }

      .loader:nth-child(5) {
          animation-delay: 0.75s;
      }

      .loader:nth-child(6) {
          animation-delay: 0.9s;
      }