Change loading animation to Sven Scharfenberg's that does not rely on JS.

loading.css

@@ -1,91 +1,116 @@
-.dots {
+.loading-animation-wrapper {
+  width: 200px;
+  height: 40px;
+  margin: 10px auto 0 auto;
+  padding-top: 4px;
+}
+.loading-animation-wrapper .caption {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: #fff;
+  font: 12px/1.4em Arial;
+}
+.loading-animation-wrapper .dot {
   position: relative;
-  width: 100%;
-}
-
-.dots span:nth-child(1) {
-  animation-delay: 0.05s;
-}
-
-.dots span:nth-child(1):after {
-  left: -20px;
-}
-
-.dots span:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-.dots span:nth-child(2):after {
-  left: -40px;
-}
-
-.dots span:nth-child(3) {
-  animation-delay: 0.15s;
-}
-
-.dots span:nth-child(3):after {
-  left: -60px;
-}
-
-.dots span:nth-child(4) {
-  animation-delay: 0.2s;
-}
-
-.dots span:nth-child(4):after {
-  left: -80px;
-}
-
-.dots span:nth-child(5) {
-  animation-delay: 0.25s;
-}
-
-.dots span:nth-child(5):after {
-  left: -100px;
-}
-
-.dots span {
   display: inline-block;
-  position: absolute;
-  animation-duration: 4s;
-  animation-iteration-count: infinite;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  border-radius: 100%;
+  -moz-animation: movingdot 4s infinite;
+  -webkit-animation: movingdot 4s infinite;
+  animation: movingdot 4s infinite;
+  -moz-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
+  -webkit-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
+  animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
+  -moz-animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.loading-animation-wrapper .dot:nth-child(1) {
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.loading-animation-wrapper .dot:nth-child(2) {
+  -moz-animation-delay: 0.9s;
+  -webkit-animation-delay: 0.9s;
+  animation-delay: 0.9s;
+}
+.loading-animation-wrapper .dot:nth-child(3) {
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+.loading-animation-wrapper .dot:nth-child(4) {
+  -moz-animation-delay: 0.7s;
+  -webkit-animation-delay: 0.7s;
+  animation-delay: 0.7s;
+}
+.loading-animation-wrapper .dot:nth-child(5) {
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
 }
 
-.dots span:after {
-  content: "";
-  position: absolute;
-  display: inline-block;
-  background-color: #f0f0f0;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.dots.animate span {
-  animation-name: dots;
-}
-
-@keyframes dots {
-  0%,20% {
-    left: 0;
-    animation-timing-function: ease-out;
+@-moz-keyframes movingdot {
+  0% {
+    -moz-transform: translateX(-30px);
+    transform: translateX(-30px);
     opacity: 0;
   }
   25% {
     opacity: 1;
   }
-  35% {
-    left: 45%;
-    animation-timing-function: linear;
-  }
-  65% {
-    left: 55%;
-    animation-timing-function: ease-in;
-  }
-  75% {
-    opacity: 1;
-  }
-  80%,100% {
-    left: 100%;
+  50% {
+    -moz-transform: translateX(200px);
+    transform: translateX(200px);
     opacity: 0;
   }
-}
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes movingdot {
+  0% {
+    -webkit-transform: translateX(-30px);
+    transform: translateX(-30px);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    -webkit-transform: translateX(200px);
+    transform: translateX(200px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes movingdot {
+  0% {
+    -moz-transform: translateX(-30px);
+    -ms-transform: translateX(-30px);
+    -webkit-transform: translateX(-30px);
+    transform: translateX(-30px);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    -moz-transform: translateX(200px);
+    -ms-transform: translateX(200px);
+    -webkit-transform: translateX(200px);
+    transform: translateX(200px);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}