#preloader { position:fixed; top:0; left:0; right:0; bottom:0; background-color:#ffffff; z-index:99999; }

#preloader .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#preloader .inner .sphere > div { display: inline-block; background-color: #fff; width: 25px; height: 25px; border-radius: 100%; margin: 3px; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: animation_sphere; animation-timing-function: linear; animation-iteration-count: infinite; }

#preloader .inner .sphere > div:nth-child(1) { animation-duration:0.75s ; animation-delay: 0; background-image: linear-gradient(to right, #232f95, #0a0a0a); }

#preloader .inner .sphere > div:nth-child(2) { animation-duration: 0.75s ; animation-delay: 0.12s; background-image: linear-gradient(to right, #232f95, #0a0a0a); }

#preloader .inner .sphere > div:nth-child(3) { animation-duration: 0.75s  ; animation-delay: 0.24s; background-image: linear-gradient(to right, #232f95, #0a0a0a); }
 
@keyframes animation_sphere 
{
  0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }

  16% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; }
  
  33% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 
}