Added loadingTemplate option

site/docs/api/table-options.md

@@ -602,6 +602,33 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Locale](https://examples.bootstrap-table.com/#options/table-locale.html)
 
+
+## loadingTemplate
+
+- **Attribute:** `data-loading-template`
+
+- **Type:** `Function`
+
+- **Detail:**
+
+  To custom the loading type by yourself. The parameters object contain:
+
+  * loadingMessage: the `formatLoadingMessage` locale.
+
+- **Default:**
+  ```
+  function (loadingMessage) {
+    return '<span class="loading-wrap">' +
+      '<span class="loading-text">' +
+      loadingMessage +
+      '</span>' +
+      '<span class="animation-wrap"><span class="animation-dot"></span></span>' +
+      '</span>'
+  }
+  ```
+
+- **Example:** [Loading Template](https://examples.bootstrap-table.com/#options/loading-template.html)
+
 ## maintainMetaData
 
 - **Attribute:** `data-maintain-meta-data`
@@ -1612,4 +1639,3 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 - **Default:** `false`
 
 - **Example:** [visible search](https://examples.bootstrap-table.com/#options/visible-search.html)
-

src/bootstrap-table.js

@@ -72,6 +72,8 @@ class BootstrapTable {
       ? '<div class="fixed-table-pagination clearfix"></div>' : ''
     const bottomPagination = ['bottom', 'both'].includes(this.options.paginationVAlign)
       ? '<div class="fixed-table-pagination"></div>' : ''
+    const loadingTemplate = Utils.calculateObjectValue(this.options,
+      this.options.loadingTemplate, [this.options.formatLoadingMessage()])
 
     this.$container = $(`
       <div class="bootstrap-table ${this.constants.theme}">
@@ -81,10 +83,7 @@ class BootstrapTable {
       <div class="fixed-table-header"><table></table></div>
       <div class="fixed-table-body">
       <div class="fixed-table-loading">
-      <span class="loading-wrap">
-      <span class="loading-text">${this.options.formatLoadingMessage()}</span>
-      <span class="animation-wrap"><span class="animation-dot"></span></span>
-      </span>
+      ${loadingTemplate}
       </div>
       </div>
       <div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>

src/constants/index.js

@@ -236,6 +236,13 @@ const DEFAULTS = {
   html: CONSTANTS.html,
   iconSize: undefined,
   iconsPrefix: CONSTANTS.iconsPrefix, // glyphicon or fa(font-awesome)
+  loadingTemplate (loadingMessage) {
+    return `<span class="loading-wrap">
+      <span class="loading-text">${loadingMessage}</span>
+      <span class="animation-wrap"><span class="animation-dot"></span></span>
+      </span>
+    `
+  },
   onAll (name, args) {
     return false
   },