.loader_wrapper {
    display: block;
    position: fixed;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 100vw;
    z-index: 9999999;
 
}
.loader_card { 
    padding: 24px;
    border-radius: 5px;
    box-shadow: 1px 4px 16px rgba(0,0,0,.4);
    min-height: 100vh;
    min-width: 100vw;
    background-color: #fbfbfb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader_loader{
    border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    height: 0px;
    width: 0px;
}

.loader_loader span{
    position: absolute;
    display: block;
    background: #ddd;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: -15px;
    perspective: 100000px;
}
.loader_loader span:nth-child(1) {
    left:60px;
    animation: loader_anim_bounce 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: 0s;
    background: #ff756f;
}
.loader_loader span:nth-child(2) {
    left:20px;
    animation: loader_anim_bounce 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: .2s;
    background: #ffde6f;
}
.loader_loader span:nth-child(3) {
    left:-20px;
    animation: loader_anim_bounce 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: .4s;
    background: #01de6f;
}
.loader_loader span:nth-child(4) {
    left: -60px;
    animation: loader_anim_bounce 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: .6s;
    background: #6f75ff;
}

@keyframes loader_anim_bounce {
    0%, 56%, 100% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-30px);
    }
}












.wrapper_small{
    display: flex;
    justify-content: center;
    align-items: center; 
  }

  .card_small {
    display: flex; 
 
    background-color: #fbfbfb;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loader_small{
     border-radius: 50%;
    position: relative;
    margin: 50px;
    display: inline-block;
    height: 0px;
    width: 0px;
  }
  
  .loader_small span{
      position: absolute;
      display: block;
      background: #ddd;
      height: 15px;
      width: 15px;
      border-radius: 50%;
      top: -15px;
      perspective: 100000px;
  }
  .loader_small span:nth-child(1) {
      left:60px;
      animation: bounce2_small 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
      animation-delay: 0s;
      background: #ff756f;
  }
  .loader_small span:nth-child(2) {
      left:20px;
      animation: bounce2_small 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
      animation-delay: .2s;
      background: #ffde6f;
  }
  .loader_small span:nth-child(3) {
      left:-20px;
      animation: bounce2_small 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
      animation-delay: .4s;
      background: #01de6f;
  }
  .loader_small span:nth-child(4) {
      left: -60px;
      animation: bounce2_small 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
      animation-delay: .6s;
      background: #6f75ff;
  }
  
  @keyframes bounce2_small {
      0%, 56%, 100% {
          transform: translateY(0px);
      }
      25% {
          transform: translateY(-30px);
      }
  }