Add loader and animation (#180)

docs/static/loader_back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="301.499" height="179.742" viewBox="0 0 282.655 168.508"><g transform="translate(-41.005 -446.364)"><rect ry="30" rx="30" y="458.77" x="53.41" height="143.698" width="105.312" stroke="#000" stroke-width="17.724" stroke-linecap="round" stroke-linejoin="round"/><rect width="105.668" height="144.183" x="53.232" y="458.527" rx="30.101" ry="30.101" fill="#fff"/></g><g transform="translate(111.528 -446.364)"><rect width="105.312" height="143.698" x="53.41" y="458.77" rx="30" ry="30" stroke="#000" stroke-width="17.724" stroke-linecap="round" stroke-linejoin="round"/><rect ry="30.101" rx="30.101" y="458.527" x="53.232" height="144.183" width="105.668" fill="#fff"/></g></svg>

docs/static/loader_front.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="301.499" height="179.742" viewBox="0 0 282.655 168.508"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(124.66 -243.829)"><circle r="25.968" cy="356.872" cx="-38.891" fill="none"/><circle cx="-38.891" cy="356.872" r="21.013" stroke-width=".809"/><path d="M-30.581 341.741a13.835 13.835 0 0 1 5.76 4.504l-11.099 8.26z" fill="#fff" stroke-width=".533"/></g><g transform="translate(277.193 -243.829)"><circle cx="-38.891" cy="356.872" r="25.968" fill="none"/><circle r="21.013" cy="356.872" cx="-38.891" stroke-width=".809"/><path d="M-30.581 341.741a13.835 13.835 0 0 1 5.76 4.504l-11.099 8.26z" fill="#fff" stroke-width=".533"/></g></g></svg>

docs/static/loader_full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="301.499" height="179.742" viewBox="0 0 282.655 168.508"><g transform="translate(-41.005 -446.364)"><rect ry="30" rx="30" y="458.77" x="53.41" height="143.698" width="105.312" stroke="#000" stroke-width="17.724" stroke-linecap="round" stroke-linejoin="round"/><rect width="105.668" height="144.183" x="53.232" y="458.527" rx="30.101" ry="30.101" fill="#fff"/></g><g transform="translate(124.66 -243.829)" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><circle r="25.968" cy="356.872" cx="-38.891" fill="none"/><circle cx="-38.891" cy="356.872" r="21.013" stroke-width=".809"/><path d="M-30.581 341.741a13.835 13.835 0 0 1 5.76 4.504l-11.099 8.26z" fill="#fff" stroke-width=".533"/></g><g transform="translate(111.528 -446.364)"><rect width="105.312" height="143.698" x="53.41" y="458.77" rx="30" ry="30" stroke="#000" stroke-width="17.724" stroke-linecap="round" stroke-linejoin="round"/><rect ry="30.101" rx="30.101" y="458.527" x="53.232" height="144.183" width="105.668" fill="#fff"/></g><g transform="translate(277.193 -243.829)" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><circle cx="-38.891" cy="356.872" r="25.968" fill="none"/><circle r="21.013" cy="356.872" cx="-38.891" stroke-width=".809"/><path d="M-30.581 341.741a13.835 13.835 0 0 1 5.76 4.504l-11.099 8.26z" fill="#fff" stroke-width=".533"/></g></svg>

theme/site/elements/loader.overrides

@@ -1,3 +1,79 @@
 /*******************************
          Site Overrides
 *******************************/
+
+.ui.loader:before {
+   border: none;
+   border-radius: 0px;
+   box-shadow: none;
+   background: transparent @loaderBackImage no-repeat center center;
+   background-size: 100%;
+}
+
+.ui.loader:after {
+   border: none;
+   box-shadow: none;
+   border-radius: 0px;
+   margin: 40px auto;
+   background: transparent @loaderImage no-repeat center center;
+   background-size: 100%;
+  -webkit-animation: @loaderAnimation @loaderSpeed infinite linear;
+  animation: @loaderAnimation @loaderSpeed infinite linear;
+}
+
+.ui.loader.avatar:after {
+   border: none;
+   box-shadow: none;
+   border-radius: 0px;
+   margin: 40px auto;
+   background: transparent @avatarImage no-repeat center center;
+   background-size: 100%;
+  -webkit-animation: @loaderAnimation @loaderSpeed infinite linear;
+  animation: @loaderAnimation @loaderSpeed infinite linear;
+}
+
+@-webkit-keyframes loader-pxt-ev3 {
+  0% {
+    -webkit-transform: translateX(@loaderStartPoint);
+            transform: translateX(@loaderStartPoint);
+            }
+  20% {
+    -webkit-transform: translateX(-@loaderMiddlePoint);
+            transform: translateX(-@loaderMiddlePoint);
+            }
+  50% {
+    -webkit-transform: translateX(-@loaderEndPoint);
+            transform: translateX(-@loaderEndPoint);
+            }
+  75% {
+    -webkit-transform: translateX(-@loaderMiddlePoint);
+            transform: translateX(-@loaderMiddlePoint);
+            }
+  100% {
+    -webkit-transform: translateX(@loaderStartPoint);
+            transform: translateX(@loaderStartPoint);
+            }
+}
+
+@keyframes loader-pxt-ev3 {
+  0% {
+    -webkit-transform: translateX(@loaderStartPoint);
+            transform: translateX(@loaderStartPoint);
+            }
+  20% {
+    -webkit-transform: translateX(-@loaderMiddlePoint);
+            transform: translateX(-@loaderMiddlePoint);
+            }
+  50% {
+    -webkit-transform: translateX(-@loaderEndPoint);
+            transform: translateX(-@loaderEndPoint);
+            }
+  75% {
+    -webkit-transform: translateX(-@loaderMiddlePoint);
+            transform: translateX(-@loaderMiddlePoint);
+            }
+  100% {
+    -webkit-transform: translateX(@loaderStartPoint);
+            transform: translateX(@loaderStartPoint);
+            }
+}

theme/site/elements/loader.variables

@@ -1,3 +1,19 @@
 /*******************************
     User Variable Overrides
 *******************************/
+
+@loaderBackImageUrl: "../docs/static/loader_back.svg";
+@loaderBackImage: data-uri(@loaderBackImageUrl);
+
+@loaderImageUrl: "../docs/static/loader_front.svg";
+@loaderImage: data-uri(@loaderImageUrl);
+
+@loaderSpeed: 2s;
+
+@loaderStartPoint: 0px;
+@loaderMiddlePoint: 14px;
+@loaderEndPoint: 28px;
+
+@loaderAnimation: loader-pxt-ev3;
+
+@large   : 200px;