Add in CSS tab loaders

src/definitions/modules/tab.js

@@ -310,11 +310,13 @@ $.tab = $.fn.tab = function(parameters) {
             }
             else {
               // look for in page anchor
-              $anchor     = $('#' + tabPath + ', a[name="' + tabPath + '"]');
+              $anchor     = (tabPath.search('/') == -1)
+                ? $('#' + tabPath + ', a[name="' + tabPath + '"]')
+                : $('#qqq'),
               currentPath = $anchor.closest('[data-tab]').data('tab');
               $tab        = module.get.tabElement(currentPath);
               // if anchor exists use parent tab
-              if($anchor.size() > 0 && currentPath) {
+              if($anchor && $anchor.size() > 0 && currentPath) {
                 module.debug('No tab found, but deep anchor link present, opening parent tab');
                 module.activate.all(currentPath);
                 if( !module.cache.read(currentPath) ) {
@@ -723,31 +725,21 @@ $.tab = function(settings) {
 
 $.fn.tab.settings = {
 
-  name        : 'Tab',
-  namespace   : 'tab',
+  name         : 'Tab',
+  namespace    : 'tab',
 
-  debug       : false,
-  verbose     : false,
-  performance : false,
-
-  // only called first time a tab's content is loaded (when remote source)
-  onTabInit   : function(tabPath, parameterArray, historyEvent) {},
-
-  // called on every load
-  onTabLoad   : function(tabPath, parameterArray, historyEvent) {},
-
-  templates   : {
-    determineTitle: function(tabArray) {}
-  },
+  debug        : false,
+  verbose      : false,
+  performance  : false,
 
   // uses pjax style endpoints fetching content from same url with remote-content headers
-  auto            : false,
-  history         : false,
-  historyType     : 'hash',
-  path            : false,
+  auto         : false,
+  history      : false,
+  historyType  : 'hash',
+  path         : false,
 
-  context         : false,
-  childrenOnly    : false,
+  context      : false,
+  childrenOnly : false,
 
   // max depth a tab can be nested
   maxDepth        : 25,
@@ -764,6 +756,16 @@ $.fn.tab.settings = {
   // settings for api call
   apiSettings     : false,
 
+  // only called first time a tab's content is loaded (when remote source)
+  onTabInit    : function(tabPath, parameterArray, historyEvent) {},
+
+  // called on every load
+  onTabLoad    : function(tabPath, parameterArray, historyEvent) {},
+
+  templates    : {
+    determineTitle: function(tabArray) {}
+  },
+
   error: {
     api        : 'You attempted to load content without API module',
     method     : 'The method you called is not defined',

src/definitions/modules/tab.less

@@ -53,19 +53,42 @@
   position: @loadingContentPosition !important;
   left: @loadingContentOffset !important;
 }
-.ui.tab.loading:after {
-  border: none;
+
+.ui.tab.loading:before,
+.ui.tab.loading.segment:before {
+  position: absolute;
+  content: '';
+  top: @loaderDistanceFromTop;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  border-radius: @circularRadius;
+  border: @loaderLineWidth solid @loaderFillColor;
+}
+.ui.tab.loading:after,
+.ui.tab.loading.segment:after {
   position: absolute;
-  top: @loadingTextDistance;
-  left: 0%;
-  content: @loadingText;
-  color: @lightTextColor;
-  width: 100%;
-  height: 100%;
-  padding-top: @loadingTextDistance;
-  text-align: @loadingAlign;
-  background: @loadingBackground;
-  visibility: visible;
+  content: '';
+  top: @loaderDistanceFromTop;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  animation: button-spin @loaderSpeed linear;
+  animation-iteration-count: infinite;
+
+  border-radius: @circularRadius;
+
+  border-color: @loaderLineColor transparent transparent;
+  border-style: solid;
+  border-width: @loaderLineWidth;
+
+  box-shadow: 0px 0px 0px 1px transparent;
 }
 
 .loadUIOverrides();