Merge pull request #5029 from wenzhixin/feature/loading-font-size

Feature/loading font size

site/docs/api/table-options.md

@@ -602,6 +602,19 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Locale](https://examples.bootstrap-table.com/#options/table-locale.html)
 
+## loadingFontSize
+
+- **Attribute:** `data-loading-font-size`
+
+- **Type:** `String`
+
+- **Detail:**
+
+  To define the font size of the loading text, the default value is `'auto'`, it will be calculated automatically according to the table width, between 12px and 32px.
+
+- **Default:** `'auto'`
+
+- **Example:** [Loading Font Size](https://examples.bootstrap-table.com/#options/loading-font-size.html)
 
 ## loadingTemplate
 

src/bootstrap-table.js

@@ -2695,6 +2695,17 @@ class BootstrapTable {
 
   showLoading () {
     this.$tableLoading.css('display', 'flex')
+
+    let fontSize = this.options.loadingFontSize
+
+    if (this.options.loadingFontSize === 'auto') {
+      fontSize = this.$tableLoading.width() * 0.04
+      fontSize = Math.max(12, fontSize)
+      fontSize = Math.min(32, fontSize)
+      fontSize = `${fontSize}px`
+    }
+
+    this.$tableLoading.find('.loading-text').css('font-size', fontSize)
   }
 
   hideLoading () {

src/constants/index.js

@@ -236,6 +236,7 @@ const DEFAULTS = {
   html: CONSTANTS.html,
   iconSize: undefined,
   iconsPrefix: CONSTANTS.iconsPrefix, // glyphicon or fa(font-awesome)
+  loadingFontSize: 'auto',
   loadingTemplate (loadingMessage) {
     return `<span class="loading-wrap">
       <span class="loading-text">${loadingMessage}</span>

src/themes/_theme.scss

@@ -212,7 +212,6 @@
           justify-content: center;
 
           .loading-text {
-            font-size: 2rem;
             margin-right: 6px;
           }