update

package/layer/src/component/index.vue

@@ -631,6 +631,29 @@ defineExpose({ reset, open, close });
           :style="{ height: contentHeight }"
           :class="contentClasses"
         >
+          <template v-if="type === 3">
+            <div 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>
+            </div>
+          </template>
           <template v-if="type === 0 || type === 1 || type === 4">
             <i v-if="icon" :class="iconClass"></i>
             <slot v-if="slots.default"></slot>

package/layer/src/theme/index.css

@@ -869,9 +869,9 @@
 }
 
 .layui-layer-loading .layui-layer-content {
-  width: 60px;
-  height: 24px;
-  background: url(loading-0.gif) no-repeat;
+  width: 0px;
+  height: 0px;
+  /* background: url(loading-0.gif) no-repeat; */
 }
 
 .layui-layer-loading .layui-layer-loading1 {
@@ -1125,4 +1125,52 @@
   transform: scale(0.7);
   margin-left: -7px;
   margin-right: 3px;
+}
+
+
+/* 下面是添加的新的加载动画 */
+.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); }
 }