Move logo to pg as well

Playground/css/index.css

@@ -24,12 +24,27 @@ body {
     flex-direction: column;
 }
 
+#logo-part {
+    width: 20vw;
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 100%;
+}
+
 #waitLogo {
-    -webkit-animation: spin1 2s infinite ease-in-out;
-    -moz-animation: spin1 2s infinite ease-in-out;
-    -o-animation: spin1 2s infinite ease-in-out;
-    -ms-animation: spin1 2s infinite ease-in-out;
-    animation: spin1 2s infinite ease-in-out;
+    grid-column: 1;
+    grid-row: 1;
+    margin: 25%;
+}
+
+#waitSpinner {
+    grid-column: 1;
+    grid-row: 1;
+    -webkit-animation: spin1 0.5s infinite linear;
+    -moz-animation: spin1 0.5s infinite linear;
+    -o-animation: spin1 0.5s infinite linear;
+    -ms-animation: spin1 0.5s infinite linear;
+    animation: spin1 0.5s infinite linear;
     -webkit-transform-origin: 50% 50%;
     -moz-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
@@ -60,7 +75,7 @@ body {
 #waitTitle {
     text-align: center;
     font-size: 38px;
-    color: #15A4FA;
+    color: #BB464B;
 }
 .wrapper {
     height: calc(100% - 40px - 30px); /* nvabar top and bottom*/

Playground/index-local.html

@@ -376,7 +376,8 @@
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>
@@ -433,7 +434,10 @@
             <BR>
             <BR>
         </span>
-        <img src="waitlogo.png" id="waitLogo" />
+        <div id="logo-part">
+            <img src="v4.svg" id="waitLogo" />
+            <img src="spinner.svg" id="waitSpinner" />
+        </div>
     </div>
 
     <script src="https://code.jquery.com/jquery.js"></script>
@@ -454,4 +458,4 @@
     </script>
 </body>
 
-</html>
+</html>

Playground/index.html

@@ -15,7 +15,8 @@
     <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
     <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
     <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="192x192"
+        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
     <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
@@ -54,7 +55,8 @@
 
     <!-- Extensions -->
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js" async></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
+        async></script>
 
     <!-- Scene Manager -->
     <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
@@ -411,7 +413,8 @@
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>
@@ -468,7 +471,10 @@
             <BR>
             <BR>
         </span>
-        <img src="waitlogo.png" id="waitLogo" />
+        <div id="logo-part">
+            <img src="v4.svg" id="waitLogo" />
+            <img src="spinner.svg" id="waitSpinner" />
+        </div>
     </div>
 
     <script src="js/libs/jquery.min.js"></script>

Playground/js/index.js

@@ -626,14 +626,14 @@ function showError(errorMessage, errorEvent) {
 
                     if (scene) {
                         if (showInspector) {
-                            if(scene.then){
+                            if (scene.then) {
                                 // Handle if scene is a promise
-                                scene.then((s)=>{
+                                scene.then((s) => {
                                     if (!s.debugLayer.isVisible()) {
                                         s.debugLayer.show({ embedMode: true });
                                     }
                                 })
-                            }else{
+                            } else {
                                 if (!scene.debugLayer.isVisible()) {
                                     scene.debugLayer.show({ embedMode: true });
                                 }