html, body { background-color: #eee; font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif; margin: 0; padding: 0; } body { background-color: #aaa; color: #333; } #rl-loading, #rl-loading-error { font-size: 30px; line-height: 130%; position: fixed; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .e-spinner { margin: 5px auto 0; width: 100px; text-align: center; } .e-spinner .e-bounce { animation: bouncedelay 1.4s infinite ease-in-out; background-color: #333; border-radius: 100%; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); display: inline-block; height: 15px; margin: 0 5px; width: 15px; /* Prevent first frame from flickering when animation starts */ animation-fill-mode: both; } .e-spinner .bounce1 { animation-delay: -0.32s; } .e-spinner .bounce2 { animation-delay: -0.16s; } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); } 40% { transform: scale(1.0); } }