button loading

resources/assets/dcat/js/extensions/Loading.js

@@ -127,8 +127,11 @@ function extend(Dcat) {
 
         loadingId = 'ld-'+Dcat.helpers.random();
 
-    let svg = LOADING_SVG[0].replace('{color}', 'currentColor')
-            .replace('{width}', '50px;height:11px;');
+        let loading = LOADING_SVG[0].replace('{color}', 'currentColor').replace('{width}', '50px;height:11px;');
+
+        if(! $this.hasClass('btn')) {
+            loading = `<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Loading...`;
+        }
 
         return $this
             .addClass('disabled btn-loading')
@@ -136,7 +139,7 @@ function extend(Dcat) {
             .attr('data-loading', loadingId)
             .html(`
 <div class="${loadingId}" style="display:none">${content}</div>
-${svg}
+${loading}
 `);
     }
 

resources/assets/dcat/sass/components/_layer.scss

@@ -67,9 +67,9 @@
   border-color: $white!important;
 }
 
-.layui-layer-btn a.btn-loading {
-  padding-top: 8px!important;
-}
+//.layui-layer-btn a.btn-loading {
+//  padding-top: 8px!important;
+//}
 
 .layui-layer-btn .layui-layer-btn0 {
   border-color: $primary!important;

resources/dist/css/plugins/loaders/animations/ball-grid-beat.css

@@ -1 +1 @@
-@-webkit-keyframes ball-grid-beat{50%{opacity:.7}to{opacity:1}}@keyframes ball-grid-beat{50%{opacity:.7}to{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:first-child{-webkit-animation-delay:-.01s;animation-delay:-.01s;-webkit-animation-duration:1.32s;animation-duration:1.32s}.ball-grid-beat>div:nth-child(2){-webkit-animation-delay:-.03s;animation-delay:-.03s;-webkit-animation-duration:.75s;animation-duration:.75s}.ball-grid-beat>div:nth-child(3){-webkit-animation-delay:.18s;animation-delay:.18s;-webkit-animation-duration:1.31s;animation-duration:1.31s}.ball-grid-beat>div:nth-child(4){-webkit-animation-delay:.61s;animation-delay:.61s;-webkit-animation-duration:1.18s;animation-duration:1.18s}.ball-grid-beat>div:nth-child(5){-webkit-animation-delay:-.02s;animation-delay:-.02s;-webkit-animation-duration:1.17s;animation-duration:1.17s}.ball-grid-beat>div:nth-child(6){-webkit-animation-delay:.36s;animation-delay:.36s;-webkit-animation-duration:1.33s;animation-duration:1.33s}.ball-grid-beat>div:nth-child(7){-webkit-animation-delay:-.08s;animation-delay:-.08s;-webkit-animation-duration:1.5s;animation-duration:1.5s}.ball-grid-beat>div:nth-child(8){-webkit-animation-delay:.66s;animation-delay:.66s;-webkit-animation-duration:.83s;animation-duration:.83s}.ball-grid-beat>div:nth-child(9){-webkit-animation-delay:.77s;animation-delay:.77s;-webkit-animation-duration:.64s;animation-duration:.64s}.ball-grid-beat>div{background-color:#b8c2cc;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-beat;animation-name:ball-grid-beat;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}
+@-webkit-keyframes ball-grid-beat{50%{opacity:.7}to{opacity:1}}@keyframes ball-grid-beat{50%{opacity:.7}to{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:first-child{-webkit-animation-delay:.77s;animation-delay:.77s;-webkit-animation-duration:.99s;animation-duration:.99s}.ball-grid-beat>div:nth-child(2){-webkit-animation-delay:.12s;animation-delay:.12s;-webkit-animation-duration:1.17s;animation-duration:1.17s}.ball-grid-beat>div:nth-child(3){-webkit-animation-delay:.53s;animation-delay:.53s;-webkit-animation-duration:1.45s;animation-duration:1.45s}.ball-grid-beat>div:nth-child(4){-webkit-animation-delay:-.05s;animation-delay:-.05s;-webkit-animation-duration:1.58s;animation-duration:1.58s}.ball-grid-beat>div:nth-child(5){-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-duration:1.11s;animation-duration:1.11s}.ball-grid-beat>div:nth-child(6){-webkit-animation-delay:.07s;animation-delay:.07s;-webkit-animation-duration:.85s;animation-duration:.85s}.ball-grid-beat>div:nth-child(7){-webkit-animation-delay:-.1s;animation-delay:-.1s;-webkit-animation-duration:.97s;animation-duration:.97s}.ball-grid-beat>div:nth-child(8){-webkit-animation-delay:-.07s;animation-delay:-.07s;-webkit-animation-duration:.64s;animation-duration:.64s}.ball-grid-beat>div:nth-child(9){-webkit-animation-delay:-.19s;animation-delay:-.19s;-webkit-animation-duration:.68s;animation-duration:.68s}.ball-grid-beat>div{background-color:#b8c2cc;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-beat;animation-name:ball-grid-beat;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}

resources/dist/css/plugins/loaders/animations/ball-grid-pulse.css

@@ -1 +1 @@
-@-webkit-keyframes ball-grid-pulse{0%{transform:scale(1)}50%{transform:scale(.5);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes ball-grid-pulse{0%{transform:scale(1)}50%{transform:scale(.5);opacity:.7}to{transform:scale(1);opacity:1}}.ball-grid-pulse{width:57px}.ball-grid-pulse>div:first-child{-webkit-animation-delay:.26s;animation-delay:.26s;-webkit-animation-duration:.84s;animation-duration:.84s}.ball-grid-pulse>div:nth-child(2){-webkit-animation-delay:.55s;animation-delay:.55s;-webkit-animation-duration:1.17s;animation-duration:1.17s}.ball-grid-pulse>div:nth-child(3){-webkit-animation-delay:.55s;animation-delay:.55s;-webkit-animation-duration:1.43s;animation-duration:1.43s}.ball-grid-pulse>div:nth-child(4){-webkit-animation-delay:.46s;animation-delay:.46s;-webkit-animation-duration:1.09s;animation-duration:1.09s}.ball-grid-pulse>div:nth-child(5){-webkit-animation-delay:.19s;animation-delay:.19s;-webkit-animation-duration:.68s;animation-duration:.68s}.ball-grid-pulse>div:nth-child(6){-webkit-animation-delay:.48s;animation-delay:.48s;-webkit-animation-duration:1.02s;animation-duration:1.02s}.ball-grid-pulse>div:nth-child(7){-webkit-animation-delay:.22s;animation-delay:.22s;-webkit-animation-duration:.87s;animation-duration:.87s}.ball-grid-pulse>div:nth-child(8){-webkit-animation-delay:.01s;animation-delay:.01s;-webkit-animation-duration:1.24s;animation-duration:1.24s}.ball-grid-pulse>div:nth-child(9){-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-duration:1.39s;animation-duration:1.39s}.ball-grid-pulse>div{background-color:#b8c2cc;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-pulse;animation-name:ball-grid-pulse;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}
+@-webkit-keyframes ball-grid-pulse{0%{transform:scale(1)}50%{transform:scale(.5);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes ball-grid-pulse{0%{transform:scale(1)}50%{transform:scale(.5);opacity:.7}to{transform:scale(1);opacity:1}}.ball-grid-pulse{width:57px}.ball-grid-pulse>div:first-child{-webkit-animation-delay:-.09s;animation-delay:-.09s;-webkit-animation-duration:.74s;animation-duration:.74s}.ball-grid-pulse>div:nth-child(2){-webkit-animation-delay:.21s;animation-delay:.21s;-webkit-animation-duration:1.23s;animation-duration:1.23s}.ball-grid-pulse>div:nth-child(3){-webkit-animation-delay:.24s;animation-delay:.24s;-webkit-animation-duration:1.25s;animation-duration:1.25s}.ball-grid-pulse>div:nth-child(4){-webkit-animation-delay:-.12s;animation-delay:-.12s;-webkit-animation-duration:.78s;animation-duration:.78s}.ball-grid-pulse>div:nth-child(5){-webkit-animation-delay:.64s;animation-delay:.64s;-webkit-animation-duration:.92s;animation-duration:.92s}.ball-grid-pulse>div:nth-child(6){-webkit-animation-delay:-.17s;animation-delay:-.17s;-webkit-animation-duration:1.28s;animation-duration:1.28s}.ball-grid-pulse>div:nth-child(7){-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:.69s;animation-duration:.69s}.ball-grid-pulse>div:nth-child(8){-webkit-animation-delay:.43s;animation-delay:.43s;-webkit-animation-duration:.8s;animation-duration:.8s}.ball-grid-pulse>div:nth-child(9){-webkit-animation-delay:-.12s;animation-delay:-.12s;-webkit-animation-duration:1.47s;animation-duration:1.47s}.ball-grid-pulse>div{background-color:#b8c2cc;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-pulse;animation-name:ball-grid-pulse;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}

resources/dist/css/plugins/loaders/animations/line-scale-random.css

@@ -1 +1 @@
-@-webkit-keyframes line-scale-party{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@keyframes line-scale-party{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}.line-scale-party>div:first-child{-webkit-animation-delay:-.02s;animation-delay:-.02s;-webkit-animation-duration:1.12s;animation-duration:1.12s}.line-scale-party>div:nth-child(2){-webkit-animation-delay:.48s;animation-delay:.48s;-webkit-animation-duration:.7s;animation-duration:.7s}.line-scale-party>div:nth-child(3){-webkit-animation-delay:.38s;animation-delay:.38s;-webkit-animation-duration:.71s;animation-duration:.71s}.line-scale-party>div:nth-child(4){-webkit-animation-delay:-.13s;animation-delay:-.13s;-webkit-animation-duration:.63s;animation-duration:.63s}.line-scale-party>div{background-color:#b8c2cc;width:4px;height:3.45rem;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;-webkit-animation-name:line-scale-party;animation-name:line-scale-party;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}
+@-webkit-keyframes line-scale-party{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}@keyframes line-scale-party{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}.line-scale-party>div:first-child{-webkit-animation-delay:.27s;animation-delay:.27s;-webkit-animation-duration:.35s;animation-duration:.35s}.line-scale-party>div:nth-child(2){-webkit-animation-delay:.29s;animation-delay:.29s;-webkit-animation-duration:.71s;animation-duration:.71s}.line-scale-party>div:nth-child(3){-webkit-animation-delay:.12s;animation-delay:.12s;-webkit-animation-duration:.85s;animation-duration:.85s}.line-scale-party>div:nth-child(4){-webkit-animation-delay:.18s;animation-delay:.18s;-webkit-animation-duration:.58s;animation-duration:.58s}.line-scale-party>div{background-color:#b8c2cc;width:4px;height:3.45rem;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;-webkit-animation-name:line-scale-party;animation-name:line-scale-party;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}