add londing

gulpfile.js

@@ -54,12 +54,11 @@ var argv = require('minimist')(process.argv.slice(2), {
     ]
     ,dir = destDir(ver);
     
-    return gulp.src(src).pipe(uglify())
+    return gulp.src(src)
       .pipe(concat('layui.js', {newLine: ''}))
       .pipe(header.apply(null, note))
     .pipe(gulp.dest('./'+ dir));
   }
-  
   //压缩 css 文件
   ,mincss: function(ver){
     var src = [

src/css/modules/layer/default/layer.css

@@ -178,3 +178,49 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 }
 
 
+/* 下面是添加的新的加载动画 */
+.loading {
+  width: 83px;
+  height: 83px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-filter: url("#goo");
+  filter: url("#goo");
+}
+.loading span {
+  width: 100%;
+  text-align: center;
+  color: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 15px;
+  letter-spacing: 1px;
+  position: absolute;
+  left: 1px;
+  top: 46%;
+}
+.loading:before, .loading:after {
+  content: '';
+  border-radius: 50%;
+  background-color: rgb(22, 120, 160);
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  left: 72px;
+  top: 8px;
+  animation: rotate 6s linear;
+  animation-iteration-count: infinite;
+  transform-origin: 12px 76px;
+}
+.loading:before {
+  box-shadow: 45px 19px 0px 0px rgb(22, 120, 160), 62px 63px 0px 0px rgb(22, 120, 160), 45px 107px 0px 0px rgb(22, 120, 160), 0px 126px 0px 0px rgb(22, 120, 160), -46px 107px 0px 0px rgb(22, 120, 160), -63px 63px 0px 0px rgb(22, 120, 160), -46px 19px 0px 0px rgb(22, 120, 160);
+}
+.loading:after {
+  animation-direction: reverse;
+}
+@keyframes rotate {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(-360deg); }
+}

src/modules/layer.js

@@ -228,7 +228,13 @@ Class.pt.vessel = function(conType, callback){
   var titleHTML = (config.title ? '<div class="layui-layer-title" style="'+ (titype ? config.title[1] : '') +'">' 
     + (titype ? config.title[0] : config.title) 
   + '</div>' : '');
-  
+  var lodingf = function (){
+    if(config.type != 3){
+      return '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
+    }else{
+      return `<div id="${config.id||''}" style="scale: 0.5"><div class="loading"> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="6.3" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 14 -4" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs> </svg>`
+    }
+  }
   config.zIndex = zIndex;
   callback([
     //遮罩
@@ -237,7 +243,7 @@ Class.pt.vessel = function(conType, callback){
     //主体
     '<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fixed ? '' : ';position:absolute;') +'">'
       + (conType && config.type != 2 ? '' : titleHTML)
-      + '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
+      + lodingf() // 这行是中间加载
         + (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
         + (config.type == 1 && conType ? '' : (config.content||''))
       + '</div>'