feat(themes): add loading info

Author: QingWei-Li

docs/plugins.md

@@ -65,7 +65,7 @@ The hook supports handling asynchronous tasks.
 ```js
 window.$docsify = {
  plugins: [
-  function (hook) {
+  function (hook, vm) {
     hook.init(function() {
       // Called when the script starts running, only trigger once, no arguments,
     })

docs/quickstart.md

@@ -61,3 +61,25 @@ If your system has Python, you can easily to run a static server to preview your
 ```bash
 cd docs && python -m SimpleHTTPServer 3000
 ```
+
+## Loading tip
+
+Show `Loading...` Before starting rendering. You can customize the content.
+
+*index.html*
+```html
+  <div id="app">Please wait...</div>
+```
+
+You should set the `data-app` attribute if you changed `el`.
+
+*index.html*
+```html
+  <div data-app id="main">Please wait...</div>
+
+  <script>
+    window.$docsify = {
+      el: '#main'
+    }
+  </script>
+```

docs/zh-cn/plugins.md

@@ -61,7 +61,7 @@ docsify 提供了一套插件机制，其中提供的钩子（hook）支持处
 ```js
 window.$docsify = {
  plugins: [
-  function (hook) {
+  function (hook, vm) {
     hook.init(function() {
       // 初始化时调用，只调用一次，没有参数。
     })

docs/zh-cn/quickstart.md

@@ -59,3 +59,26 @@ docsify serve docs
 ```bash
 cd docs && python -m SimpleHTTPServer 3000
 ```
+
+## Loading 提示
+
+初始化时会显示 `Loading...` 内容，你可以自定义提示信息。
+
+*index.html*
+```html
+  <div id="app">加载中</div>
+```
+
+如果更改了 `el` 的配置，需要将该元素加上 `data-app` 属性。
+
+*index.html*
+```html
+  <div data-app id="main">加载中</div>
+
+  <script>
+    window.$docsify = {
+      el: '#main'
+    }
+  </script>
+```
+

src/themes/basic/_layout.css

@@ -7,6 +7,23 @@
   -webkit-font-smoothing: antialiased;
 }
 
+body:not(.ready) {
+  [data-cloak] {
+    display: none;
+  }
+}
+
+div#app {
+  text-align: center;
+  font-size: 30px;
+  font-weight: lighter;
+  margin: 40vw auto;
+
+  &:empty::before {
+    content: "Loading...";
+  }
+}
+
 .emoji {
   height: 1.2em;
   vertical-align: middle;