change loading animation

docs/assets/js/docify.js

@@ -425,11 +425,41 @@
    * Init progress component
    */
   function init() {
+    var progress_bg = create('div');
+    var progress_title = create('h2');
+    var progress_box = create('div');
+    var progress_bar = create('div');
     var div = create('div');
-  
-    div.classList.add('progress');
-    appendTo(body, div);
+    progress_title.innerText = "Docs Loading...."
+    progress_title.style.textAlign = "center"
+    progress_title.style.marginTop = "-50px"
+    progress_bg.style.position = "fixed";
+    progress_bg.style.top = "0px";
+    progress_bg.style.left = "0px";
+    progress_bg.style.width = "100%";
+    progress_bg.style.height = "100%";
+    progress_bg.style.background = "white"; 
+    progress_bg.style.zIndex = "9999";
+    progress_bar.classList.add('progress');
+    progress_bar.style.width = "100%";
+    progress_bar.style.height = "50px";
+    progress_bar.style.borderRadius = "50px";
+  //   div.classList.add('progress');
+    div.classList.add('progress-bar');
+    div.classList.add('progress-bar-striped');
+    div.classList.add('progress-bar-animated');
+    progress_box.style.position = "fixed";
+    progress_box.style.top = "50%";
+    progress_box.style.left = "50%";
+    progress_box.style.width = "50%";
+    progress_box.style.transform = "translate(-50%,-50%)";
+    appendTo(progress_bar, div);
+    appendTo(progress_box, progress_title);
+    appendTo(progress_box, progress_bar);
+    appendTo(progress_bg, progress_box);
+    appendTo(body, progress_bg);
     barEl = div;
+    barE2 = progress_bg;
   }
   /**
    * Render progress bar
@@ -451,13 +481,14 @@
     }
   
     barEl.style.opacity = 1;
-    barEl.style.width = num >= 95 ? '100%' : num + '%';
-  
+    barEl.innerText = num + "%";
+    barEl.style.width = num >= 95 ? '100%' : num + '%';    
     if (num >= 95) {
       clearTimeout(timeId);
       timeId = setTimeout(function (_) {
         barEl.style.opacity = 0;
         barEl.style.width = '0%';
+        barE2.style.display = "none";
       }, 200);
     }
   }
@@ -4353,7 +4384,9 @@
             html = formatUpdated(html, opt.updatedAt, this$1.config.formatUpdated);
           }
   
-          callHook(this$1, 'afterEach', html, function (text) { completeLoading();return renderMain.call(this$1, text); });
+          // callHook(this$1, 'afterEach', html, function (text) { completeLoading();return renderMain.call(this$1, text); });
+          callHook(this$1, 'afterEach', html, function (text) {return renderMain.call(this$1, text); });
+
         };
         if (this$1.isHTML) {
           html = this$1.result = text;

docs/index.html

@@ -16,7 +16,7 @@
 
     <link rel="stylesheet" href="assets/css/main-min.css">
 
-    <script>
+    <!-- <script>
         var _LoadingHtml = '<div id="loading"><div class="loading-flex"><div class="demo3"></div><div class="demo3"></div><div class="demo3"></div><div class="demo3"></div><div class="demo3"></div><div class="demo3"></div><div class="demo3"></div><div class="demo3"></div></div></div>';
         document.write(_LoadingHtml);
 
@@ -39,7 +39,7 @@
                 loadingMask.style.display = 'block'; 
             }
         })
-    </Script>
+    </Script> -->
 
     <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>