.caja-loader{
    display: none;
    background: #000000bd;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999999999;
    top: 0px;
    left: 0px;
  }
  
    .loader  {
      animation: rotate 1s infinite;  
      height: 50px;
      width: 50px;
      position: fixed;
      top:45%;
      left: 48%;
    }
    
    .loader:before,
    .loader:after {   
      border-radius: 50%;
      content: '';
      display: block;
      height: 20px;  
      width: 20px;
    }
    .loader:before {
      animation: ball1 1s infinite;  
      background-color: #cb2025;
      box-shadow: 30px 0 0 #f8b334;
      margin-bottom: 10px;
    }
    .loader:after {
      animation: ball2 1s infinite; 
      background-color: #00a096;
      box-shadow: 30px 0 0 #97bf0d;
    }
    
    @keyframes rotate {
      0% { 
        -webkit-transform: rotate(0deg) scale(0.8); 
        -moz-transform: rotate(0deg) scale(0.8);
      }
      50% { 
        -webkit-transform: rotate(360deg) scale(1.2); 
        -moz-transform: rotate(360deg) scale(1.2);
      }
      100% { 
        -webkit-transform: rotate(720deg) scale(0.8); 
        -moz-transform: rotate(720deg) scale(0.8);
      }
    }
    
    @keyframes ball1 {
      0% {
        box-shadow: 30px 0 0 #f8b334;
      }
      50% {
        box-shadow: 0 0 0 #f8b334;
        margin-bottom: 0;
        -webkit-transform: translate(15px,15px);
        -moz-transform: translate(15px, 15px);
      }
      100% {
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px;
      }
    }
    
    @keyframes ball2 {
      0% {
        box-shadow: 30px 0 0 #97bf0d;
      }
      50% {
        box-shadow: 0 0 0 #97bf0d;
        margin-top: -20px;
        -webkit-transform: translate(15px,15px);
        -moz-transform: translate(15px, 15px);
      }
      100% {
        box-shadow: 30px 0 0 #97bf0d;
        margin-top: 0;
      }
    }
  
/* para moviles */
@media (max-width: 768px) {
  .caja-loader .loader {
      left: 45%;
  }
   
}