added svg loader

aviabird · Jan 17, 2017 · 3b86078 · 3b86078
1 parent e183b81
commit 3b86078
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,47 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <pin-root>Loading...</pin-root>
+  <pin-root>
+    <svg
+      style="
+        position: absolute;
+        transform: translate(-2vw, 15vh);
+        margin: 0 auto;
+        top: 25vh;
+        left: 42vw;"
+      width='20vw'
+      height='20vh'
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      class="uil-balls">
+      <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
+      <g transform="rotate(0 50 50)">
+        <circle r="5" cx="30" cy="50">
+          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
+          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#f29c98;#f5b697"/>
+        </circle>
+      </g>
+      <g transform="rotate(90 50 50)">
+        <circle r="5" cx="30" cy="50">
+          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
+          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#f5b697;#f5e797"/>
+        </circle>
+      </g>
+      <g transform="rotate(180 50 50)">
+        <circle r="5" cx="30" cy="50">
+          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
+          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#f5e797;#a2e4f5"/>
+        </circle>
+      </g>
+      <g transform="rotate(270 50 50)">
+        <circle r="5" cx="30" cy="50">
+          <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
+          <animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite"  keyTimes="0;1" values="#a2e4f5;#f29c98"/>
+        </circle>
+      </g>
+    </svg>
+  </pin-root>
 </body>
 <script type="text/javascript">
   $(document).foundation();