.loading-images-1 {
    /* Apply animation to this element */
    opacity: 0;	
    -webkit-animation: slide 0.3s ease-out 0s forwards;
    -moz-animation: slide 0.3s ease-out 0s forwards;
      -o-animation: slide 0.3s ease-out 0s forwards;
         animation: slide 0.3s ease-out 0s forwards;
}

.loading-images-2 {
    /* Apply animation to this element */	
    opacity: 0;
    -webkit-animation: slide 0.3s ease-out 0.3s forwards;
    -moz-animation: slide 0.3s ease-out 0.3s forwards;
      -o-animation: slide 0.3s ease-out 0.3s forwards;
         animation: slide 0.3s ease-out 0.3s forwards;
}

.loading-images-3 {
    /* Apply animation to this element */	
    opacity: 0;
    -webkit-animation: slide 0.3s ease-out 0.5s forwards;
    -moz-animation: slide 0.3s ease-out 0.5s forwards;
      -o-animation: slide 0.3s ease-out 0.5s forwards;
         animation: slide 0.3s ease-out 0.5s forwards;
}

@keyframes slide {
    0%   { 
        opacity: 0.1;
    }
    100% { 
        opacity: 1.0;
    }
}


.custom-loader {
    width:50px;
    margin: 0 auto;
    height:24px;
    background: 
      radial-gradient(circle closest-side,#009ee2 90%,#0000) 0%   50%,
      radial-gradient(circle closest-side,#009ee2 90%,#0000) 50%  50%,
      radial-gradient(circle closest-side,#009ee2 90%,#0000) 100% 50%;
    background-size:calc(100%/3) 12px;
    background-repeat: no-repeat;
    animation:d3 1s infinite linear;
  }
  @keyframes d3 {
      20%{background-position:0%   0%, 50%  50%,100%  50%}
      40%{background-position:0% 100%, 50%   0%,100%  50%}
      60%{background-position:0%  50%, 50% 100%,100%   0%}
      80%{background-position:0%  50%, 50%  50%,100% 100%}
  }