.loader-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index:99050;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  /* background-color: #000;
  opacity: 0.5; */
  transition: opacity 0.15s linear;
}

.position2{ position: absolute; left: 50%;  top: 50%;}

/* loader 2 */
.loader1 {
    width: 48px;
    height: 48px;
    border: 3px dotted #FFF;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    /*position: relative;*/
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
    }
    .loader1::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px dotted #ffb21e;
    border-style: solid solid dotted;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
    }
        
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 
    @keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
    } 

    /* loader 2 */
    .loader2 {
        width: 60px;
        height: 40px;
        position: relative;
        display: inline-block;
        --base-color: #263238; /*use your base color*/
        }
        .loader2::before {
        content: '';  
        left: 0;
        top: 0;
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #FFF;
        background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: rotationBack 3s linear infinite;
        }
        .loader2::after {
        content: '';  
        left: 35px;
        top: 15px;
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #FFF;
        background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: rotationBack 4s linear infinite reverse;
        }
        @keyframes rotationBack {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
        } 
 
/** LOADER 3 **/    
.loader3 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader3::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid;
    border-color: #FF3D00 transparent;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 

  /* LOADER 4 */
  .loader4 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader4::after,
  .loader4::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .loader4::before {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* LOADING 5 */
  .loader5 {
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline-block;
    color: #FF3D00;
    letter-spacing: 2px;
    position: relative;
    box-sizing: border-box;
  }
  .loader5::after {
    content: 'Loading';
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    animation: animloader 6s linear infinite;
  }
  
  @keyframes animloader {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }

/** LOADER 6 **/
.loader6 {
    width: 48px;
    height: 48px;
    border: 3px dashed #FFF;
    border-radius: 50%;
    display: inline-block;
    /*position: relative;*/
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader6::after {
     /*content: ''; */
    content: '\F7CC';
    font-family: 'bootstrap-icons';
    font-size: 25px;
    color: #ffb21e;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
     /*background: #fff;*/ 
    width: 25px;
    height: 25px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/** LOADER 7 **/
.loader7 {
    width: 82px;
    height: 18px;
    position: relative;
}

    .loader7::before, .loader7::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%, 10%);
        top: 0;
        background: #bd2727;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        animation: jump 0.5s ease-in infinite alternate;
    }

    .loader7::after {
        background: #0000;
        color: #fff;
        top: 100%;
        box-shadow: 32px -20px, -32px -20px;
        animation: split 0.5s ease-out infinite alternate;
    }

@keyframes split {
    0% {
        box-shadow: 8px -20px, -8px -20px
    }

    100% {
        box-shadow: 32px -20px, -32px -20px
    }
}

@keyframes jump {
    0% {
        transform: translate(-50%, -150%)
    }

    100% {
        transform: translate(-50%, 10%)
    }
}

/** LOADER 8 **/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

.loader8 {
    font-size: 18px;
    color: #FFF;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    position: absolute;
    margin-top: 30px;
    margin-left: -75px;
}

    .loader8:after {
        content: '';
        height: 4px;
        width: 0%;
        display: block;
        background: #FF3D00;
        animation: 5s lineGrow linear infinite;
    }

@keyframes lineGrow {
    to {
        width: 100%;
    }
}
/** LOADER 8 **/