MAPG-52 replace loading animation

public/static/css/mapguesser.css

@@ -83,12 +83,12 @@ div.buttonContainer.bottom {
 
 #loading {
     position: absolute;
-    width: 40px;
-    height: 40px;
+    width: 64px;
+    height: 64px;
     top: 50%;
     left: 50%;
-    margin-top: -20px;
-    margin-left: -20px;
+    margin-top: -32px;
+    margin-left: -32px;
     z-index: 3;
 }
 

public/static/img/loading.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
+    <g>
+        <linearGradient id="linear-gradient">
+            <stop offset="0%" stop-color="#ffffff" fill-opacity="0"/>
+            <stop offset="100%" stop-color="#000000" fill-opacity="1"/>
+        </linearGradient>
+        <path d="M63.85 0A63.85 63.85 0 1 1 0 63.85 63.85 63.85 0 0 1 63.85 0zm.65 19.5a44 44 0 1 1-44 44 44 44 0 0 1 44-44z" fill="url(#linear-gradient)" fill-rule="evenodd"/>
+        <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1080ms" repeatCount="indefinite"></animateTransform>
+    </g>
+</svg>