Changes on .loading attribute

examples/test/app/events.js

@@ -10,8 +10,13 @@ App.Events = (function(lng, undefined) {
             lng.View.Element.loading('#loading-code', 'white');
         }, 1000);
 
+    });
 
 
+    $$('section#sec-1 header a .icon.cloud').tap(function(event) {
+        var el = lng.dom(this);
+        el.hide();
+        el.siblings('.loading').removeClass('disable');
     });
 
     //SPECIAL

examples/test/index.html

@@ -51,18 +51,26 @@
                 <span class="title with-subtitle">Javi Jiménez Villar</span>
                 <span class="subtitle">@soyjavi</span>
             </div>
-            <nav class="onright">
-                <a href="#profiles" data-target="aside" data-icon="users"></a>
+            <nav class="onright ">
+                <!-- <a href="#profiles" data-target="aside" data-label="User"></a>
+
+                <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
+                 -->
+                 <a href="#" data-icon="cloud" data-loading="white disable"></a>
+                <a href="#profiles" data-target="aside" data-icon="user"></a>
             </nav>
-        </header>
 
+            <nav class="onright plain ">
+                <a href="#" data-loading="white disable"></a>
+                <a href="#" data-loading="white "></a>
+            </nav>
+        </header>
 
         <nav class="groupbar">
             <a href="#nav-1" data-target="article" class="current"  data-icon="html5">&nbsp;Lists</a>
             <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
         </nav>
 
-
         <footer class="toolbar with-labels">
             <nav>
                 <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" class="current" data-label="boxes" data-count="1"></a>

src/stylesheets/Lungo.layout.nav.less

@@ -19,6 +19,7 @@ nav {
         min-width: 28px;
         z-index: 1000;
         float: left;
+        height:  @header_nav_height;
 
         & .icon {
             //position: relative;
@@ -33,10 +34,12 @@ nav {
         }
 
         & abbr {
-            position: relative;
-            display: inline;
             font-weight: bold;
         }
+
+        & .loading {
+            font-size: 20px;
+        }
     }
 
     & .bubble {
@@ -73,7 +76,7 @@ nav {
 }
 
 header, footer {
-    &:not(.toolbar) nav .icon ~ abbr { margin-left: 6px; }
+   &:not(.toolbar) nav .icon ~ abbr { margin-left: 4px; float: right; }
 }
 
 .toolbar {

src/stylesheets/Lungo.widgets.loading.less

@@ -15,13 +15,20 @@
     height: 1em;
     width: 1em;
     margin-left: -.5em;
+    margin-top: .5em;
+
     .transform-origin(.5em .5em);
     -webkit-animation:  rotatingLoader .5s  infinite  linear;
     -moz-animation:  rotatingLoader .5s  infinite  linear;
-
     font-size: 48px;
 
-    &.small { font-size: 20px; }
+    &.disable {
+        -webkit-animation: none;
+        -moz-animation: none;
+        display: none
+    }
+
+    &.small { font-size: 20px;}
     &.big { font-size: 64px; }
 
     & > span {
@@ -80,6 +87,10 @@
     }
 }
 
+section.current .loading {
+
+}
+
 @-webkit-keyframes rotatingLoader{
     0%{     .transform(rotate(0deg));   }
     8.32%{  .transform(rotate(0deg));   }

src/stylesheets/constants.less

@@ -2,6 +2,7 @@
 
 /* DIMENSIONS */
 @header-height: 42px;
+    @header_nav_height: 41px;
     @header_groupbar_height: 30px;
 
 @header_footer_height: 40px;