.preloader {
   /* position: fixed;
    left: 0px;
    top: 0px;*/
    width: 100%;
    height: 100%;
 /*   z-index: 999999;*/
    display: flex;
    align-items: center;
    justify-content: center;  
 /*   background: #fff;*/
    transition: all 0.3s;
    opacity: 1;
}
.preloader-remove {
    opacity: 0;
    z-index: -10;
}

.preloader-5 {
    display: block;
    position: relative;
    width: 150px;
    height: 150px;
    margin: 30px auto;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #337AB7;
    animation: preloader-5-spin 2s linear infinite;
}
.preloader-5:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BFE2FF;
    animation: preloader-5-spin 3s linear infinite;
}
.preloader-5:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #337AB7;
    animation: preloader-5-spin 1.5s linear infinite;
}
@keyframes preloader-5-spin {
    0%   {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


		
	.loader-my {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #CBEAF1;
      }
        .loader-my:before,
        .loader-my:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader-my:after {
          color: #1A85A0;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }
   
   
   

.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:50px;
  height:50px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}


.custom-loader {
  width: 30px;
  height: 30px;
  position: relative;
}
.custom-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: #0167FF;
  animation: ck339a 2s linear infinite;
}
.custom-loader::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 6px solid transparent;
  border-bottom-color: #E4E4ED;
  animation: ck339b 2s linear infinite;
}
@keyframes ck339a {
  to { transform: rotate(1turn); }
}
@keyframes ck339b {
  to { transform: rotate(-1turn); }
}

/*
use <div class="load">
					  <hr/><hr/><hr/><hr/>
					</div>
*/