:root{
    --loader--width: 250px;
    --loader-dot--size: 20px;
    }
    .fondo_loader{
    height: 100px;
    width: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--bg-color-transl);
    backdrop-filter: blur(10px);
    border-radius: 5px;
    z-index: 1058;
    } 
    
    .container{
        height: 100vh;
      width: 100vw;
      font-family: Helvetica;
      display: none;
    }
    
    
    .loader{
      height: var(--loader-dot--size);
      width: var(--loader--width);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: var(--bg-color-transl);
      backdrop-filter: blur(10px);
      
      & .loader--dot{
        animation-name: loader;
        animation-timing-function: ease-in-out;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        height: var(--loader-dot--size) ;
        width: var(--loader-dot--size);
        border-radius: 100%;
        background-color: black;
        position: absolute;
        border: 2px solid white;
        
        &:first-child{
          background-color: #8cc759;
          animation-delay: 0.5s;
        }
        &:nth-child(2){
          background-color: #8c6daf;
          animation-delay: 0.4s;
        }
        &:nth-child(3){
          background-color: #ef5d74;
          animation-delay: 0.3s;
        }
        &:nth-child(4){
          background-color: #f9a74b;
          animation-delay: 0.2s;
        }
        &:nth-child(5){
          background-color: #60beeb;
          animation-delay: 0.1s;
        }
        &:nth-child(6){
          background-color: #fbef5a;
          animation-delay: 0s;
        }}
      & .loader--text{
        position: absolute;
        top: 200%;
        left: 0;
        right: 0;
        width: 4rem;
        margin: auto;
      
        &:after{
          content: "Cargando"  ;    
          font-weight: bold;
          animation-name: loading-text;
          animation-duration: 3s;
          animation-iteration-count: infinite;
       
          
        }
      }
    }
    @keyframes loader{
      15%{
        transform: translateX(0);
      }
      45%{
        transform: translateX(162px)
      }
      65%{
        transform: translateX( 230px)
      }
      95%{
        transform: translateX(0)
      }
    }
    @keyframes loading-text{
      0%{
        content: "Cargando"
      }
      25%{
        content: "Cargando."
      }
      50%{
        content: "Cargando.."
      }
      75%{
        content: "Cargando..."}
      }