diff --git a/.DS_Store b/.DS_Store
index b9705da4..ab26f2cb 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/index.html b/index.html
index ebe222bd..09f52070 100644
--- a/index.html
+++ b/index.html
@@ -77,39 +77,74 @@
       padding-bottom: 48px;
     }
 
-    #pre-loading-animation
-      .pre-loading-animation__wrapper
-      .pre-loading-animation__wrapper-loader {
-      margin: 0 0 2em;
-      height: 100px;
-      width: 20%;
-      text-align: center;
-      padding: 1em;
-      margin: 0 auto 1em;
-      display: inline-block;
-      vertical-align: top;
+    .pre-loading-animation__wrapper-loading {
+      display: block;
+      position: relative;
+      width: 6px;
+      height: 10px;
+
+      -webkit-animation: rectangle infinite 1s ease-in-out -0.2s;
+
+              animation: rectangle infinite 1s ease-in-out -0.2s;
+
+      background-color: #ff6700;
     }
 
-    #pre-loading-animation
-      .pre-loading-animation__wrapper
-      .pre-loading-animation__wrapper-loader
-      svg
-      path,
-    #pre-loading-animation
-      .pre-loading-animation__wrapper
-      .pre-loading-animation__wrapper-loader
-      svg
-      rect {
-      fill: #ff6700;
+    .pre-loading-animation__wrapper-loading:before,
+    .pre-loading-animation__wrapper-loading:after {
+      position: absolute;
+      width: 6px;
+      height: 10px;
+      content: '';
+      background-color: #ff6700;
     }
 
-    #pre-loading-animation
-      .pre-loading-animation__wrapper
-      .pre-loading-animation__wrapper-loader
-      svg {
-      -webkit-transform: scale(2);
-          -ms-transform: scale(2);
-              transform: scale(2);
+    .pre-loading-animation__wrapper-loading:before {
+      left: -14px;
+
+      -webkit-animation: rectangle infinite 1s ease-in-out -0.4s;
+
+              animation: rectangle infinite 1s ease-in-out -0.4s;
+    }
+
+    .pre-loading-animation__wrapper-loading:after {
+      right: -14px;
+
+      -webkit-animation: rectangle infinite 1s ease-in-out;
+
+              animation: rectangle infinite 1s ease-in-out;
+    }
+
+    @-webkit-keyframes rectangle {
+      0%,
+      80%,
+      100% {
+        height: 20px;
+        -webkit-box-shadow: 0 0 #ff6700;
+                box-shadow: 0 0 #ff6700;
+      }
+
+      40% {
+        height: 30px;
+        -webkit-box-shadow: 0 -20px #ff6700;
+                box-shadow: 0 -20px #ff6700;
+      }
+    }
+
+    @keyframes rectangle {
+      0%,
+      80%,
+      100% {
+        height: 20px;
+        -webkit-box-shadow: 0 0 #ff6700;
+                box-shadow: 0 0 #ff6700;
+      }
+
+      40% {
+        height: 30px;
+        -webkit-box-shadow: 0 -20px #ff6700;
+                box-shadow: 0 -20px #ff6700;
+      }
     }
   </style>
   <body>
@@ -117,55 +152,7 @@
     <div id="pre-loading-animation">
       <div class="pre-loading-animation__wrapper">
         <div class="pre-loading-animation__wrapper-title">Ray Template</div>
-        <div class="pre-loading-animation__wrapper-loader">
-          <svg
-            version="1.1"
-            id="Layer_1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            x="0px"
-            y="0px"
-            width="24px"
-            height="30px"
-            viewBox="0 0 24 30"
-            style="enable-background: new 0 0 50 50"
-            xml:space="preserve"
-          >
-            <rect x="0" y="0" width="4" height="10" fill="#333">
-              <animateTransform
-                attributeType="xml"
-                attributeName="transform"
-                type="translate"
-                values="0 0; 0 20; 0 0"
-                begin="0"
-                dur="0.6s"
-                repeatCount="indefinite"
-              />
-            </rect>
-            <rect x="10" y="0" width="4" height="10" fill="#333">
-              <animateTransform
-                attributeType="xml"
-                attributeName="transform"
-                type="translate"
-                values="0 0; 0 20; 0 0"
-                begin="0.2s"
-                dur="0.6s"
-                repeatCount="indefinite"
-              />
-            </rect>
-            <rect x="20" y="0" width="4" height="10" fill="#333">
-              <animateTransform
-                attributeType="xml"
-                attributeName="transform"
-                type="translate"
-                values="0 0; 0 20; 0 0"
-                begin="0.4s"
-                dur="0.6s"
-                repeatCount="indefinite"
-              />
-            </rect>
-          </svg>
-        </div>
+        <div class="pre-loading-animation__wrapper-loading"></div>
       </div>
     </div>
     
diff --git a/index.html.gz b/index.html.gz
index b2f7e796..3e67def8 100644
Binary files a/index.html.gz and b/index.html.gz differ
