Replace SVG spinner with GIF (closes #11), decrease splash screen time

config.xml

@@ -38,7 +38,6 @@
         <splash qualifier="land-xxhdpi" src="res/screens/android/screen-xxhdpi-landscape.png" />
         <splash qualifier="land-xxxhdpi" src="res/screens/android/screen-xxxhdpi-landscape.png" />
     </platform>
-    <preference name="SplashScreenDelay" value="3000" />
     <preference name="AutoHideSplashScreen" value="false" />
     <engine name="android" spec="^6.3.0" />
     <plugin name="cordova-plugin-app-version" spec="^0.1.9" />

www/css/spinner.css

@@ -1,67 +0,0 @@
-.spinner {
-    -webkit-animation: rotator 1.4s linear infinite;
-    animation: rotator 1.4s linear infinite;
-}
-
-@-webkit-keyframes rotator {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(270deg);
-        transform: rotate(270deg);
-    }
-}
-
-@keyframes rotator {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(270deg);
-        transform: rotate(270deg);
-    }
-}
-.spinner .path {
-    stroke-dasharray: 187;
-    stroke-dashoffset: 0;
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
-    animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
-    stroke: #448aff;    
-}
-
-@-webkit-keyframes dash {
-    0% {
-        stroke-dashoffset: 187;
-    }
-    50% {
-        stroke-dashoffset: 46.75;
-        -webkit-transform: rotate(135deg);
-        transform: rotate(135deg);
-    }
-    100% {
-        stroke-dashoffset: 187;
-        -webkit-transform: rotate(450deg);
-        transform: rotate(450deg);
-    }
-}
-
-@keyframes dash {
-    0% {
-        stroke-dashoffset: 187;
-    }
-    50% {
-        stroke-dashoffset: 46.75;
-        -webkit-transform: rotate(135deg);
-        transform: rotate(135deg);
-    }
-    100% {
-        stroke-dashoffset: 187;
-        -webkit-transform: rotate(450deg);
-        transform: rotate(450deg);
-    }
-}

www/index.html

@@ -40,9 +40,7 @@
             <div class="app-dock-container">
                 <div class="app-dock" id="app-dock">
                     <div style="margin-top: 50px;">
-                        <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-                        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-                        </svg>
+                        <img src="img/loader.gif" style="width: 65px; height: 65px;" alt=""/>
                     </div>
                     <div style="width: 100%;"></div>
                     <p class="loading-text">Loading...</p>

www/js/app.js

@@ -272,5 +272,5 @@ document.addEventListener("deviceready", function () {
     } else {
         openscreen("setup1");
     }
-    setTimeout(navigator.splashscreen.hide, 1000);
+    setTimeout(navigator.splashscreen.hide, 500);
 }, false);

www/views/appspinner.html

@@ -20,74 +20,6 @@
         flex-direction: column;
     }
 
-    .spinner {
-        -webkit-animation: rotator 1.4s linear infinite;
-        animation: rotator 1.4s linear infinite;
-    }
-
-    @-webkit-keyframes rotator {
-        0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-        100% {
-            -webkit-transform: rotate(270deg);
-            transform: rotate(270deg);
-        }
-    }
-
-    @keyframes rotator {
-        0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-        100% {
-            -webkit-transform: rotate(270deg);
-            transform: rotate(270deg);
-        }
-    }
-    .spinner .path {
-        stroke-dasharray: 187;
-        stroke-dashoffset: 0;
-        -webkit-transform-origin: center;
-        transform-origin: center;
-        -webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
-        animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
-        stroke: #448aff;    
-    }
-
-    @-webkit-keyframes dash {
-        0% {
-            stroke-dashoffset: 187;
-        }
-        50% {
-            stroke-dashoffset: 46.75;
-            -webkit-transform: rotate(135deg);
-            transform: rotate(135deg);
-        }
-        100% {
-            stroke-dashoffset: 187;
-            -webkit-transform: rotate(450deg);
-            transform: rotate(450deg);
-        }
-    }
-
-    @keyframes dash {
-        0% {
-            stroke-dashoffset: 187;
-        }
-        50% {
-            stroke-dashoffset: 46.75;
-            -webkit-transform: rotate(135deg);
-            transform: rotate(135deg);
-        }
-        100% {
-            stroke-dashoffset: 187;
-            -webkit-transform: rotate(450deg);
-            transform: rotate(450deg);
-        }
-    }
-
     #statustext {
         text-align: center;
     }
@@ -113,9 +45,8 @@
         position: relative;
     }
 </style>
-<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-</svg>
+
+<img src="file:///android_asset/www/img/loader.gif" style="width: 65px; height: 65px;" alt=""/>
 
 <p id="statustext">Logging in...</p>
 <br />

www/views/home.html

@@ -4,9 +4,7 @@
 <div class="app-dock-container">
     <div class="app-dock" id="app-dock">
         <div style="margin-top: 50px;">
-            <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-            </svg>
+            <img src="img/loader.gif" style="width: 65px; height: 65px;" alt=""/>
         </div>
         <div style="width: 100%;"></div>
         <p class="loading-text">Loading...</p>