fix #2509: Updated the style of loading message.

src/bootstrap-table.js

@@ -497,7 +497,7 @@
   const LOCALES = {}
   LOCALES['en-US'] = LOCALES.en = {
     formatLoadingMessage () {
-      return 'Loading, please wait...'
+      return 'Loading, please wait'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rows per page`
@@ -670,7 +670,10 @@
         <div class="fixed-table-header"><table></table></div>
         <div class="fixed-table-body">
         <div class="fixed-table-loading">
-        ${this.options.formatLoadingMessage()}
+        <span class="loading-wrap">
+        <span class="loading-text">${this.options.formatLoadingMessage()}</span>
+        <span class="animation-wrap"><span class="animation-dot"></span></span>
+        </span>
         </div>
         </div>
         <div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>
@@ -697,6 +700,7 @@
       this.$container.after('<div class="clearfix"></div>')
 
       this.$el.addClass(this.options.classes)
+      this.$tableLoading.addClass(this.options.classes)
 
       if (this.options.height) {
         this.$tableContainer.addClass('fixed-height')
@@ -2132,7 +2136,7 @@
       }
 
       if (!silent) {
-        this.$tableLoading.show()
+        this.showLoading()
       }
       const request = $.extend({}, Utils.calculateObjectValue(null, this.options.ajaxOptions), {
         type: this.options.method,
@@ -2149,7 +2153,7 @@
           this.load(res)
           this.trigger('load-success', res)
           if (!silent) {
-            this.$tableLoading.hide()
+            this.hideLoading()
           }
         },
         error: jqXHR => {
@@ -2276,6 +2280,8 @@
         .html('').attr('class', this.$el.attr('class'))
         .append(this.$header_)
 
+      this.$tableLoading.css('width', this.$el.outerWidth())
+
       const focusedTemp = $('.focus-temp:visible:eq(0)')
       if (focusedTemp.length > 0) {
         focusedTemp.focus()
@@ -2989,11 +2995,11 @@
     }
 
     showLoading () {
-      this.$tableLoading.show()
+      this.$tableLoading.css('display', 'flex')
     }
 
     hideLoading () {
-      this.$tableLoading.hide()
+      this.$tableLoading.css('display', 'none')
     }
 
     togglePagination () {

src/locale/bootstrap-table-af-ZA.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['af-ZA'] = {
     formatLoadingMessage () {
-      return 'Besig om te laai, wag asseblief ...'
+      return 'Besig om te laai, wag asseblief'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rekords per bladsy`

src/locale/bootstrap-table-ar-SA.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ar-SA'] = {
     formatLoadingMessage () {
-      return 'جاري التحميل, يرجى الإنتظار...'
+      return 'جاري التحميل, يرجى الإنتظار'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} سجل لكل صفحة`

src/locale/bootstrap-table-ca-ES.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ca-ES'] = {
     formatLoadingMessage () {
-      return 'Espereu, si us plau...'
+      return 'Espereu, si us plau'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} resultats per pàgina`

src/locale/bootstrap-table-cs-CZ.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['cs-CZ'] = {
     formatLoadingMessage () {
-      return 'Čekejte, prosím...'
+      return 'Čekejte, prosím'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} položek na stránku`

src/locale/bootstrap-table-da-DK.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['da-DK'] = {
     formatLoadingMessage () {
-      return 'Indlæser, vent venligst...'
+      return 'Indlæser, vent venligst'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} poster pr side`

src/locale/bootstrap-table-de-DE.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['de-DE'] = {
     formatLoadingMessage () {
-      return 'Lade, bitte warten...'
+      return 'Lade, bitte warten'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} Zeilen pro Seite.`

src/locale/bootstrap-table-el-GR.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['el-GR'] = {
     formatLoadingMessage () {
-      return 'Φορτώνει, παρακαλώ περιμένετε...'
+      return 'Φορτώνει, παρακαλώ περιμένετε'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} αποτελέσματα ανά σελίδα`

src/locale/bootstrap-table-en-US.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['en-US'] = {
     formatLoadingMessage () {
-      return 'Loading, please wait...'
+      return 'Loading, please wait'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rows per page`

src/locale/bootstrap-table-es-AR.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-AR'] = {
     formatLoadingMessage () {
-      return 'Cargando, espere por favor...'
+      return 'Cargando, espere por favor'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registros por página`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['es-AR'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-es-CL.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-CL'] = {
     formatLoadingMessage () {
-      return 'Cargando, espere por favor...'
+      return 'Cargando, espere por favor'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} filas por p\u00E1gina`

src/locale/bootstrap-table-es-CR.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-CR'] = {
     formatLoadingMessage () {
-      return 'Cargando, por favor espere...'
+      return 'Cargando, por favor espere'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registros por página`

src/locale/bootstrap-table-es-ES.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-ES'] = {
     formatLoadingMessage () {
-      return 'Por favor espere...'
+      return 'Por favor espere'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} resultados por página`

src/locale/bootstrap-table-es-MX.js

@@ -7,7 +7,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-MX'] = {
     formatLoadingMessage () {
-      return 'Cargando, espere por favor...'
+      return 'Cargando, espere por favor'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registros por página`

src/locale/bootstrap-table-es-NI.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-NI'] = {
     formatLoadingMessage () {
-      return 'Cargando, por favor espere...'
+      return 'Cargando, por favor espere'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registros por página`

src/locale/bootstrap-table-es-SP.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['es-SP'] = {
     formatLoadingMessage () {
-      return 'Cargando, por favor espera...'
+      return 'Cargando, por favor espera'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registros por página.`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['es-SP'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-et-EE.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['et-EE'] = {
     formatLoadingMessage () {
-      return 'Päring käib, palun oota...'
+      return 'Päring käib, palun oota'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rida lehe kohta`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['et-EE'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-eu-EU.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['eu-EU'] = {
     formatLoadingMessage () {
-      return 'Itxaron mesedez...'
+      return 'Itxaron mesedez'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} emaitza orriko.`

src/locale/bootstrap-table-fa-IR.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['fa-IR'] = {
     formatLoadingMessage () {
-      return 'در حال بارگذاری, لطفا صبر کنید...'
+      return 'در حال بارگذاری, لطفا صبر کنید'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} رکورد در صفحه`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['fa-IR'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-fi-FI.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['fi-FI'] = {
     formatLoadingMessage () {
-      return 'Ladataan, ole hyvä ja odota...'
+      return 'Ladataan, ole hyvä ja odota'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} riviä sivulla`

src/locale/bootstrap-table-fr-BE.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['fr-BE'] = {
     formatLoadingMessage () {
-      return 'Chargement en cours...'
+      return 'Chargement en cours'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} entrées par page`

src/locale/bootstrap-table-fr-FR.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['fr-FR'] = {
     formatLoadingMessage () {
-      return 'Chargement en cours, patientez, s´il vous plaît ...'
+      return 'Chargement en cours, patientez, s´il vous plaît'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} lignes par page`

src/locale/bootstrap-table-he-IL.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['he-IL'] = {
     formatLoadingMessage () {
-      return 'טוען, נא להמתין...'
+      return 'טוען, נא להמתין'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} שורות בעמוד`

src/locale/bootstrap-table-hr-HR.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['hr-HR'] = {
     formatLoadingMessage () {
-      return 'Molimo pričekajte ...'
+      return 'Molimo pričekajte'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} broj zapisa po stranici`

src/locale/bootstrap-table-hu-HU.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['hu-HU'] = {
     formatLoadingMessage () {
-      return 'Betöltés, kérem várjon...'
+      return 'Betöltés, kérem várjon'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rekord per oldal`

src/locale/bootstrap-table-id-ID.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['id-ID'] = {
     formatLoadingMessage () {
-      return 'Memuat, mohon tunggu...'
+      return 'Memuat, mohon tunggu'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} baris per halaman`

src/locale/bootstrap-table-it-IT.js

@@ -7,7 +7,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['it-IT'] = {
     formatLoadingMessage () {
-      return 'Caricamento in corso...'
+      return 'Caricamento in corso'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} elementi per pagina`

src/locale/bootstrap-table-ka-GE.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ka-GE'] = {
     formatLoadingMessage () {
-      return 'იტვირთება, გთხოვთ მოიცადოთ...'
+      return 'იტვირთება, გთხოვთ მოიცადოთ'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} ჩანაწერი თითო გვერდზე`

src/locale/bootstrap-table-ko-KR.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ko-KR'] = {
     formatLoadingMessage () {
-      return '데이터를 불러오는 중입니다...'
+      return '데이터를 불러오는 중입니다'
     },
     formatRecordsPerPage (pageNumber) {
       return `페이지 당 ${pageNumber}개 데이터 출력`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['ko-KR'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-ms-MY.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ms-MY'] = {
     formatLoadingMessage () {
-      return 'Permintaan sedang dimuatkan. Sila tunggu sebentar...'
+      return 'Permintaan sedang dimuatkan. Sila tunggu sebentar'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rekod setiap muka surat`

src/locale/bootstrap-table-nb-NO.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['nb-NO'] = {
     formatLoadingMessage () {
-      return 'Oppdaterer, vennligst vent...'
+      return 'Oppdaterer, vennligst vent'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} poster pr side`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['nb-NO'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-nl-NL.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['nl-NL'] = {
     formatLoadingMessage () {
-      return 'Laden, even geduld...'
+      return 'Laden, even geduld'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} records per pagina`

src/locale/bootstrap-table-pl-PL.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['pl-PL'] = {
     formatLoadingMessage () {
-      return 'Ładowanie, proszę czekać...'
+      return 'Ładowanie, proszę czekać'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rekordów na stronę`

src/locale/bootstrap-table-pt-BR.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['pt-BR'] = {
     formatLoadingMessage () {
-      return 'Carregando, aguarde...'
+      return 'Carregando, aguarde'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registros por página`

src/locale/bootstrap-table-pt-PT.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['pt-PT'] = {
     formatLoadingMessage () {
-      return 'A carregar, por favor aguarde...'
+      return 'A carregar, por favor aguarde'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} registos por página`

src/locale/bootstrap-table-ro-RO.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ro-RO'] = {
     formatLoadingMessage () {
-      return 'Se incarca, va rugam asteptati...'
+      return 'Se incarca, va rugam asteptati'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} inregistrari pe pagina`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['ro-RO'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-ru-RU.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['ru-RU'] = {
     formatLoadingMessage () {
-      return 'Пожалуйста, подождите, идёт загрузка...'
+      return 'Пожалуйста, подождите, идёт загрузка'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} записей на страницу`

src/locale/bootstrap-table-sk-SK.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['sk-SK'] = {
     formatLoadingMessage () {
-      return 'Prosím čakajte ...'
+      return 'Prosím čakajte'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} záznamov na stranu`

src/locale/bootstrap-table-sv-SE.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['sv-SE'] = {
     formatLoadingMessage () {
-      return 'Laddar, vänligen vänta...'
+      return 'Laddar, vänligen vänta'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} rader per sida`

src/locale/bootstrap-table-th-TH.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['th-TH'] = {
     formatLoadingMessage () {
-      return 'กำลังโหลดข้อมูล, กรุณารอสักครู่...'
+      return 'กำลังโหลดข้อมูล, กรุณารอสักครู่'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} รายการต่อหน้า`

src/locale/bootstrap-table-tr-TR.js

@@ -6,7 +6,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['tr-TR'] = {
     formatLoadingMessage () {
-      return 'Yükleniyor, lütfen bekleyin...'
+      return 'Yükleniyor, lütfen bekleyin'
     },
     formatRecordsPerPage (pageNumber) {
       return `Sayfa başına ${pageNumber} kayıt.`

src/locale/bootstrap-table-uk-UA.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['uk-UA'] = {
     formatLoadingMessage () {
-      return 'Завантаження, будь ласка, зачекайте...'
+      return 'Завантаження, будь ласка, зачекайте'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} записів на сторінку`

src/locale/bootstrap-table-uz-Latn-UZ.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['uz-Latn-UZ'] = {
     formatLoadingMessage () {
-      return 'Yuklanyapti, iltimos kuting...'
+      return 'Yuklanyapti, iltimos kuting'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} qator har sahifada`

src/locale/bootstrap-table-vi-VN.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['vi-VN'] = {
     formatLoadingMessage () {
-      return 'Đang tải...'
+      return 'Đang tải'
     },
     formatRecordsPerPage (pageNumber) {
       return `${pageNumber} bản ghi mỗi trang`
@@ -61,4 +61,4 @@
   }
 
   $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['vi-VN'])
-})(jQuery)
+})(jQuery)

src/locale/bootstrap-table-zh-CN.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['zh-CN'] = {
     formatLoadingMessage () {
-      return '正在努力地加载数据中，请稍候……'
+      return '正在努力地加载数据中，请稍候'
     },
     formatRecordsPerPage (pageNumber) {
       return `每页显示 ${pageNumber} 条记录`

src/locale/bootstrap-table-zh-TW.js

@@ -5,7 +5,7 @@
 ($ => {
   $.fn.bootstrapTable.locales['zh-TW'] = {
     formatLoadingMessage () {
-      return '正在努力地載入資料，請稍候……'
+      return '正在努力地載入資料，請稍候'
     },
     formatRecordsPerPage (pageNumber) {
       return `每頁顯示 ${pageNumber} 項記錄`

src/themes/bootstrap/variables.scss

@@ -1,3 +1,5 @@
 $border-color: #dee2e6;
 $hover-bg: rgba(0,0,0,.075);
+$background: #fff;
+$color: #212529;
 $dark-border-color: #32383e;

src/themes/bulma/variables.scss

@@ -1,3 +1,5 @@
 $border-color: #dbdbdb;
 $hover-bg: hsl(0,0%,98%);
+$background: #fff;
+$color: #363636;
 $dark-border-color: #32383e;

src/themes/foundation/variables.scss

@@ -1,3 +1,5 @@
 $border-color: #f1f1f1;
 $hover-bg: #f9f9f9;
+$background: #fff;
+$color: rgba(0,0,0,.87);
 $dark-border-color: #32383e;

src/themes/materialize/variables.scss

@@ -1,3 +1,5 @@
 $border-color: rgba(0,0,0,0.12);
 $hover-bg: rgba(242,242,242,0.5);
+$background: #fefefe;
+$color: #0a0a0a;
 $dark-border-color: #32383e;

src/themes/semantic/variables.scss

@@ -1,3 +1,5 @@
 $border-color: rgba(34,36,38,0.1);
 $hover-bg: rgba(0,0,0,.075);
+$background: #fff;
+$color: rgba(0,0,0,.87);
 $dark-border-color: #32383e;

src/themes/theme.scss

@@ -99,15 +99,65 @@
       height: 100%;
 
       .fixed-table-loading {
+        align-items: center;
+        background: $background;
         display: none;
+        justify-content: center;
         position: absolute;
-        top: 42px;
-        right: 0;
         bottom: 0;
-        left: 0;
-        z-index: 99;
-        background-color: #fff;
-        text-align: center;
+        width: 100%;
+        z-index: 1000;
+
+        .loading-wrap {
+          align-items: baseline;
+          display: flex;
+          justify-content: center;
+
+          .loading-text {
+            font-size: 2rem;
+            margin-right: 6px;
+          }
+
+          .animation-wrap {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+          }
+
+          .animation-dot,
+          .animation-wrap:after,
+          .animation-wrap:before {
+            content: "";
+            animation-duration: 1.5s;
+            animation-iteration-count: infinite;
+            animation-name: LOADING;
+            background: $color;
+            border-radius: 50%;
+            display: block;
+            height: 5px;
+            margin: 0 4px;
+            opacity: 0;
+            width: 5px;
+          }
+
+          .animation-dot {
+            animation-delay: .3s;
+          }
+
+          .animation-wrap:after{
+            animation-delay:.6s;
+          }
+        }
+
+        &.table-dark {
+          background: $color;
+
+          .animation-dot,
+          .animation-wrap:after,
+          .animation-wrap:before {
+            background: $background;
+          }
+        }
       }
     }
 
@@ -287,3 +337,9 @@ div.fixed-table-scroll-outer {
   height: 150px;
   overflow: hidden;
 }
+
+@keyframes LOADING{
+  0% { opacity:0; }
+  50% { opacity:1; }
+  to { opacity:0; }
+}