use a simpler loader and fix import file path

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/public/index.html

@@ -7,165 +7,24 @@
     <link rel="icon" href="<%= BASE_URL %>cloud.ico">
     <title>Apache CloudStack</title>
     <style>
-    /*!
+      .loader {
-     * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+        border: 16px solid #F3F3F3;
-     * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+        border-top: 16px solid #39A7DE;
-     * Licensed under MIT
+        border-radius: 50%;
-     */
+        width: 80px;
-    .la-ball-scale-ripple-multiple,
+        height: 80px;
-    .la-ball-scale-ripple-multiple > div {
+        animation: spin 1s linear infinite;
-        position: relative;
+        position: fixed;
-        -webkit-box-sizing: border-box;
+        left: 0; right: 0;
-           -moz-box-sizing: border-box;
+        top: 0; bottom: 0;
-                box-sizing: border-box;
+        margin: auto;
-    }
+        max-width: 100%;
-    .la-ball-scale-ripple-multiple {
+        max-height: 100%;
-        font-size: 0;
+        overflow: hidden;
-        color: #fff;
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 250px;
-    }
-    .la-ball-scale-ripple-multiple.la-dark {
-        color: #333;
-    }
-    .la-ball-scale-ripple-multiple > div {
-        display: inline-block;
-        float: none;
-        background-color: currentColor;
-        border: 0 solid currentColor;
-    }
-    .la-ball-scale-ripple-multiple {
-        width: 32px;
-        height: 32px;
-    }
-    .la-ball-scale-ripple-multiple > div {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 32px;
-        height: 32px;
-        background: transparent;
-        border-width: 2px;
-        border-radius: 100%;
-        opacity: 0;
-        -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
-           -moz-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
-             -o-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
-                animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
-    }
-    .la-ball-scale-ripple-multiple > div:nth-child(1) {
-        -webkit-animation-delay: 0s;
-           -moz-animation-delay: 0s;
-             -o-animation-delay: 0s;
-                animation-delay: 0s;
-    }
-    .la-ball-scale-ripple-multiple > div:nth-child(2) {
-        -webkit-animation-delay: .25s;
-           -moz-animation-delay: .25s;
-             -o-animation-delay: .25s;
-                animation-delay: .25s;
-    }
-    .la-ball-scale-ripple-multiple > div:nth-child(3) {
-        -webkit-animation-delay: .5s;
-           -moz-animation-delay: .5s;
-             -o-animation-delay: .5s;
-                animation-delay: .5s;
-    }
-    .la-ball-scale-ripple-multiple.la-sm {
-        width: 16px;
-        height: 16px;
-    }
-    .la-ball-scale-ripple-multiple.la-sm > div {
-        width: 16px;
-        height: 16px;
-        border-width: 1px;
-    }
-    .la-ball-scale-ripple-multiple.la-2x {
-        width: 64px;
-        height: 64px;
-    }
-    .la-ball-scale-ripple-multiple.la-2x > div {
-        width: 64px;
-        height: 64px;
-        border-width: 4px;
-    }
-    .la-ball-scale-ripple-multiple.la-3x {
-        width: 96px;
-        height: 96px;
-    }
-    .la-ball-scale-ripple-multiple.la-3x > div {
-        width: 96px;
-        height: 96px;
-        border-width: 6px;
-    }
-    /*
-     * Animation
-     */
-    @-webkit-keyframes ball-scale-ripple-multiple {
-        0% {
-            opacity: 1;
-            -webkit-transform: scale(.1);
-                    transform: scale(.1);
-        }
-        70% {
-            opacity: .5;
-            -webkit-transform: scale(1);
-                    transform: scale(1);
-        }
-        95% {
-            opacity: 0;
-        }
-    }
-    @-moz-keyframes ball-scale-ripple-multiple {
-        0% {
-            opacity: 1;
-            -moz-transform: scale(.1);
-                 transform: scale(.1);
-        }
-        70% {
-            opacity: .5;
-            -moz-transform: scale(1);
-                 transform: scale(1);
-        }
-        95% {
-            opacity: 0;
-        }
-    }
-    @-o-keyframes ball-scale-ripple-multiple {
-        0% {
-            opacity: 1;
-            -o-transform: scale(.1);
-               transform: scale(.1);
-        }
-        70% {
-            opacity: .5;
-            -o-transform: scale(1);
-               transform: scale(1);
-        }
-        95% {
-            opacity: 0;
-        }
-    }
-    @keyframes ball-scale-ripple-multiple {
-        0% {
-            opacity: 1;
-            -webkit-transform: scale(.1);
-               -moz-transform: scale(.1);
-                 -o-transform: scale(.1);
-                    transform: scale(.1);
-        }
-        70% {
-            opacity: .5;
-            -webkit-transform: scale(1);
-               -moz-transform: scale(1);
-                 -o-transform: scale(1);
-                    transform: scale(1);
-        }
-        95% {
-            opacity: 0;
       }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
       }
     </style>
   </head>
@@ -174,7 +33,7 @@
       <strong>We're sorry but CloudStack Primate needs JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app">
-        <div style="color: #39A7DE" class="la-ball-scale-ripple-multiple la-3x"><div></div><div></div><div></div></div>
+      <div class="loader"></div>
     </div>
   </body>
 </html>

ui/src/layouts/BasicLayout.vue

@@ -26,7 +26,7 @@ export default {
 </script>
 
 <style lang="less">
-  @import url('../../style/index.less');
+  @import url('../style/index.less');
 
   /*
  * The following styles are auto-applied to elements with