v8: Replace tree loader with umbLoader component (#6169)

src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less

@@ -39,17 +39,10 @@
     
     // Loading Animation
     // ------------------------
-    .l {
+    .umb-tree-item__loader {
         width: 100%;
-        height: 2px;
-        overflow: hidden;
         position: absolute;
-        left: 0;
-        bottom: -1px;
-
-        div { 
-            .umb-loader;
-        }
+        margin: 0;
     }
 
     .umb-tree-item__label {

src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less

@@ -33,12 +33,6 @@
             display: none;
         }
     }
-    
-    //loader defaults
-    .umb-loader {
-        height: 10px;
-        margin: 10px 10px 10px 10px;
-    }
 
     .search-subtitle {
         color: @gray-7;

src/Umbraco.Web.UI.Client/src/less/installer.less

@@ -13,6 +13,9 @@
 @import "../../lib/bootstrap/less/thumbnails.less";
 @import "../../lib/bootstrap/less/media.less";
 
+// Umbraco Components
+@import "components/umb-loader.less";
+
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
@@ -165,45 +168,17 @@ input.ng-dirty.ng-invalid{border-color: #b94a48; color: #b94a48;}
     opacity:1;
 }
 
+.umb-installer-loader {
+    margin: 0;
+    width: 0;
+    z-index: 777;
 
-.umb-loader{
-    background-color: @white;
-    margin-top:0;
-    margin-left:-100%;
-    animation-name:bounce_loadingProgressG;
-    animation-duration:1s;
-    animation-iteration-count:infinite;
-    animation-timing-function:linear;
-    width:100%;
-    height: 5px;
-}
-
-@keyframes bounce_loadingProgressG{
-    0%{
-        margin-left:-100%;
-    }
-    100%{
-        margin-left:100%;
+    .umb-loader {
+        background-color: @white;
+        height: 5px;
     }
 }
 
-//loader defaults
-.umb-loader-container, .umb-loader-done{
-	height: 3px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  width: 0%;
-  z-index: 777;
-}
-
-.umb-loader-done{
-   right: 0%;
-   background: @white;
-}
-
-
 .permissions-report {
     overflow:auto;
     height:320px;

src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html

@@ -15,7 +15,8 @@
 
         <!-- NOTE: These are the 'option' elipses -->
         <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></button>
-        <div ng-show="node.loading" class="l"><div></div></div>
+
+        <umb-loader ng-show="node.loading" position="bottom" class="umb-tree-item__loader"></umb-loader>
     </div>
 
     <ul ng-class="{collapsed: !node.expanded}">

src/Umbraco.Web.UI/Umbraco/Install/Views/Index.cshtml

@@ -19,11 +19,13 @@
 
     <img src="assets/img/application/logo_white.png" id="logo" />
 
-    <div class="umb-loader-container" ng-style="{'width': installer.progress}">
-        <div class="umb-loader" id="loader" ng-if="installer.loading"></div>
-    </div>
+    <umb-loader position="bottom"
+                class="umb-installer-loader"
+                ng-if="installer.loading"
+                ng-style="{'width': installer.progress}">
+    </umb-loader>
 
-    <div id="overlay"  ng-cloak ng-animate="'fade'" ng-show="installer.done"></div>
+    <div id="overlay" ng-cloak ng-animate="'fade'" ng-show="installer.done"></div>
 
     <div id="installer" class="absolute-center clearfix"
          ng-cloak