diff --git a/templates/custom/global_mask.tmpl b/templates/custom/global_mask.tmpl
new file mode 100644
index 000000000..fd2dfcbe6
--- /dev/null
+++ b/templates/custom/global_mask.tmpl
@@ -0,0 +1,21 @@
+<div id="mask">
+	<div class="loadingWrap">
+		<div id="loading-page">
+			<div class="rect1"></div>
+			<div class="rect2"></div>
+			<div class="rect3"></div>
+			<div class="rect4"></div>
+			<div class="rect5"></div>
+		</div>
+		<div
+			style="
+				margin-top: 10%;
+				font-size: 14px;
+				color: #101010;
+				font-family: SourceHanSansSC-regular;
+			"
+		>
+			任务正在准备中，喝杯水回来再看看~
+		</div>
+	</div>
+</div>
diff --git a/templates/repo/cloudbrain/benchmark/new.tmpl b/templates/repo/cloudbrain/benchmark/new.tmpl
index e1b5c890e..f8e83e1ae 100755
--- a/templates/repo/cloudbrain/benchmark/new.tmpl
+++ b/templates/repo/cloudbrain/benchmark/new.tmpl
@@ -28,18 +28,7 @@
         white-space: nowrap !important;
     }
 </style>
-<!-- <div class="ui page dimmer">
-    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
-</div> -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/cloudbrain/inference/new.tmpl b/templates/repo/cloudbrain/inference/new.tmpl
index efea83a46..fc2c37bc7 100644
--- a/templates/repo/cloudbrain/inference/new.tmpl
+++ b/templates/repo/cloudbrain/inference/new.tmpl
@@ -36,15 +36,7 @@
     white-space: nowrap !important;
 }
 </style>
-<div id="mask">
-        <div id="loadingPage">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
-        </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/cloudbrain/new.tmpl b/templates/repo/cloudbrain/new.tmpl
index 0d07b2add..e2d1b2993 100755
--- a/templates/repo/cloudbrain/new.tmpl
+++ b/templates/repo/cloudbrain/new.tmpl
@@ -1,56 +1,6 @@
 {{template "base/head" .}}
 <style>
-    #mask1 {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    filter: alpha(opacity=60);
-    background-color: rgba(119,119,119,0.8);
-    z-index: 1000;
-    display: none;
-    /* opacity: 0.8;
-    -moz-opacity: 0.5; */
-    /* padding-top: 100px; */
-    color: #000000;
-}
-#loadingPage1 {
-    width: 50px;
-    height: 40px;
-    text-align: center;
-    font-size: 10px;
-    display: block;
-}
-
-#loadingPage1 > div {
-    background-color: green;
-    height: 100%;
-    width: 6px;
-    display: inline-block;
-    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
-    animation: sk-stretchdelay 1.2s infinite ease-in-out;
-}
-
-#loadingPage1 .rect2 {
-    -webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
-}
-
-#loadingPage1 .rect3 {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-}
-
-#loadingPage1 .rect4 {
-    -webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
-}
-
-#loadingPage1 .rect5 {
-    -webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
-}
+    
     /* 遮罩层css效果图  */
     .inline.required.field.cloudbrain_benchmark {
         display: none;
@@ -63,39 +13,11 @@
     .inline.required.field.cloudbrain_brainscore {
         display: none;
     }
-    .loadingWrap{
-        width: 20%;
-        height:25%;
-        border: 1px solid #bbb;
-        background-color:#fff;
-        margin:auto;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        border-radius: 20px;
-    }
+    
 
 </style>
 
-<div id="mask1">
-    <div class="loadingWrap">
-        <div id="loadingPage1">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
-        </div>
-        <div style="margin-top: 10%;font-size: 14px;color:#101010;font-family: SourceHanSansSC-regular;">任务正在准备中，喝杯水回来再看看~</div>
-    </div>
-    
-</div>
+{{template "custom/global_mask" .}}
 
 <div class="repository">
     {{template "repo/header" .}}
@@ -269,7 +191,6 @@
 <script>
     let form = document.getElementById('form_id');
     $('#messageInfo').css('display', 'none')
-    document.getElementById("mask").style.display = "block"
     function clearValue() {
         context = inputs[0]
         context.value = ''
diff --git a/templates/repo/cloudbrain/trainjob/new.tmpl b/templates/repo/cloudbrain/trainjob/new.tmpl
index 79a52d565..72e22f730 100755
--- a/templates/repo/cloudbrain/trainjob/new.tmpl
+++ b/templates/repo/cloudbrain/trainjob/new.tmpl
@@ -64,18 +64,7 @@
     }
 
 </style>
-<!-- <div class="ui page dimmer">
-    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
-</div> -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/debugjob/index.tmpl b/templates/repo/debugjob/index.tmpl
index 8c1bb1316..5e35f9750 100755
--- a/templates/repo/debugjob/index.tmpl
+++ b/templates/repo/debugjob/index.tmpl
@@ -19,90 +19,6 @@
         height: 100%;
     }
 
-    /* 弹窗 */
-
-    #mask {
-        position: fixed;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        filter: alpha(opacity=60);
-        background-color: #777;
-        z-index: 1000;
-        display: none;
-        opacity: 0.8;
-        -moz-opacity: 0.5;
-        padding-top: 100px;
-        color: #000000
-    }
-
-    #loadingPage {
-        margin: 200px auto;
-        width: 50px;
-        height: 40px;
-        text-align: center;
-        font-size: 10px;
-        display: block;
-    }
-
-    #loadingPage>div {
-        background-color: green;
-        height: 100%;
-        width: 6px;
-        display: inline-block;
-        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
-        animation: sk-stretchdelay 1.2s infinite ease-in-out;
-    }
-
-    #loadingPage .rect2 {
-        -webkit-animation-delay: -1.1s;
-        animation-delay: -1.1s;
-    }
-
-    #loadingPage .rect3 {
-        -webkit-animation-delay: -1.0s;
-        animation-delay: -1.0s;
-    }
-
-    #loadingPage .rect4 {
-        -webkit-animation-delay: -0.9s;
-        animation-delay: -0.9s;
-    }
-
-    #loadingPage .rect5 {
-        -webkit-animation-delay: -0.8s;
-        animation-delay: -0.8s;
-    }
-
-    @-webkit-keyframes sk-stretchdelay {
-
-        0%,
-        40%,
-        100% {
-            -webkit-transform: scaleY(0.4)
-        }
-
-        20% {
-            -webkit-transform: scaleY(1.0)
-        }
-    }
-
-    @keyframes sk-stretchdelay {
-
-        0%,
-        40%,
-        100% {
-            transform: scaleY(0.4);
-            -webkit-transform: scaleY(0.4);
-        }
-
-        20% {
-            transform: scaleY(1.0);
-            -webkit-transform: scaleY(1.0);
-        }
-    }
-
     /* 消息框 */
 
     .alert {
@@ -203,17 +119,6 @@
     }
 </style>
 
-<!-- 弹窗 -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
-
 <div class="alert"></div>
 <div class="repository release dataset-list view">
     {{template "repo/header" .}}
diff --git a/templates/repo/grampus/trainjob/gpu/new.tmpl b/templates/repo/grampus/trainjob/gpu/new.tmpl
index 8860316f7..6dd928f65 100755
--- a/templates/repo/grampus/trainjob/gpu/new.tmpl
+++ b/templates/repo/grampus/trainjob/gpu/new.tmpl
@@ -56,18 +56,7 @@
     font-size: 14px !important;
 }
 </style>
-<!-- <div class="ui page dimmer">
-    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
-</div> -->
-<div id="mask">
-        <div id="loadingPage">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
-        </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/grampus/trainjob/npu/new.tmpl b/templates/repo/grampus/trainjob/npu/new.tmpl
index 9b31f4c7a..76bb572f0 100755
--- a/templates/repo/grampus/trainjob/npu/new.tmpl
+++ b/templates/repo/grampus/trainjob/npu/new.tmpl
@@ -51,18 +51,7 @@
     font-size: 14px !important;
 }
 </style>
-<!-- <div class="ui page dimmer">
-    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
-</div> -->
-<div id="mask">
-        <div id="loadingPage">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
-        </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/grampus/trainjob/show.tmpl b/templates/repo/grampus/trainjob/show.tmpl
index dd0ea89ee..3794943d6 100755
--- a/templates/repo/grampus/trainjob/show.tmpl
+++ b/templates/repo/grampus/trainjob/show.tmpl
@@ -209,15 +209,7 @@
         box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
     }
 </style>
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/modelarts/inferencejob/index.tmpl b/templates/repo/modelarts/inferencejob/index.tmpl
index dac873e3d..de987d24e 100644
--- a/templates/repo/modelarts/inferencejob/index.tmpl
+++ b/templates/repo/modelarts/inferencejob/index.tmpl
@@ -10,16 +10,6 @@
     }
 </style>
 
-<!-- 弹窗 -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
 
 <!-- 提示框 -->
 <div class="alert"></div>
diff --git a/templates/repo/modelarts/inferencejob/new.tmpl b/templates/repo/modelarts/inferencejob/new.tmpl
index 2774263a9..3b2150e41 100644
--- a/templates/repo/modelarts/inferencejob/new.tmpl
+++ b/templates/repo/modelarts/inferencejob/new.tmpl
@@ -35,15 +35,7 @@
     white-space: nowrap !important;
 }
 </style>
-<div id="mask">
-        <div id="loadingPage">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
-        </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/modelarts/notebook/new.tmpl b/templates/repo/modelarts/notebook/new.tmpl
index 3b9dcfafb..30449a1a4 100755
--- a/templates/repo/modelarts/notebook/new.tmpl
+++ b/templates/repo/modelarts/notebook/new.tmpl
@@ -5,15 +5,7 @@
 }
 </style>
 
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="repository new repo ui middle very relaxed page grid">
diff --git a/templates/repo/modelarts/notebook/show.tmpl b/templates/repo/modelarts/notebook/show.tmpl
index 2b2541900..7736ec9cb 100755
--- a/templates/repo/modelarts/notebook/show.tmpl
+++ b/templates/repo/modelarts/notebook/show.tmpl
@@ -208,15 +208,6 @@
         padding-top: 0.5rem;
     }
 </style>
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/modelarts/trainjob/new.tmpl b/templates/repo/modelarts/trainjob/new.tmpl
index 081d39f70..51f447f46 100755
--- a/templates/repo/modelarts/trainjob/new.tmpl
+++ b/templates/repo/modelarts/trainjob/new.tmpl
@@ -58,15 +58,7 @@
 <!-- <div class="ui page dimmer">
     <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
 </div> -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/modelarts/trainjob/show.tmpl b/templates/repo/modelarts/trainjob/show.tmpl
index 2df725b93..4e41e8d26 100755
--- a/templates/repo/modelarts/trainjob/show.tmpl
+++ b/templates/repo/modelarts/trainjob/show.tmpl
@@ -215,15 +215,7 @@
         box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
     }
 </style>
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/modelarts/trainjob/version_new.tmpl b/templates/repo/modelarts/trainjob/version_new.tmpl
index 886469d4c..6712f5e7d 100644
--- a/templates/repo/modelarts/trainjob/version_new.tmpl
+++ b/templates/repo/modelarts/trainjob/version_new.tmpl
@@ -51,18 +51,7 @@
 }
 
 </style>
-<!-- <div class="ui page dimmer">
-    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
-</div> -->
-<div id="mask">
-        <div id="loadingPage">
-            <div class="rect1"></div>
-            <div class="rect2"></div>
-            <div class="rect3"></div>
-            <div class="rect4"></div>
-            <div class="rect5"></div>
-        </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
     {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/repo/modelmanage/convertshowinfo.tmpl b/templates/repo/modelmanage/convertshowinfo.tmpl
index 984b5944f..0744ff777 100644
--- a/templates/repo/modelmanage/convertshowinfo.tmpl
+++ b/templates/repo/modelmanage/convertshowinfo.tmpl
@@ -166,15 +166,7 @@ td, th {
     padding-top: 0.5rem ;
 }
 </style>
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
+{{template "custom/global_mask" .}}
 <div class="repository">
 {{template "repo/header" .}}
     <div class="ui container">
diff --git a/templates/user/dashboard/cloudbrains.tmpl b/templates/user/dashboard/cloudbrains.tmpl
index 8019bc51d..910531549 100755
--- a/templates/user/dashboard/cloudbrains.tmpl
+++ b/templates/user/dashboard/cloudbrains.tmpl
@@ -1,14 +1,4 @@
 {{template "base/head" .}}
-<!-- 弹窗 -->
-<div id="mask">
-    <div id="loadingPage">
-        <div class="rect1"></div>
-        <div class="rect2"></div>
-        <div class="rect3"></div>
-        <div class="rect4"></div>
-        <div class="rect5"></div>
-    </div>
-</div>
 <!-- 提示框 -->
 <div class="alert"></div>
 <div class="explore users">
diff --git a/web_src/less/openi.less b/web_src/less/openi.less
index b9622924f..fe002ceb7 100644
--- a/web_src/less/openi.less
+++ b/web_src/less/openi.less
@@ -522,6 +522,60 @@ i.SUCCEEDED {
 // }
 /* 弹窗 */
 
+// #mask {
+//     position: fixed;
+//     top: 0px;
+//     left: 0px;
+//     right: 0px;
+//     bottom: 0px;
+//     filter: alpha(opacity=60);
+//     background-color: #777;
+//     z-index: 1000;
+//     display: none;
+//     opacity: 0.8;
+//     -moz-opacity: 0.5;
+//     padding-top: 100px;
+//     color: #000000;
+// }
+
+#loadingPage {
+    margin: 300px auto;
+    width: 50px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+    display: block;
+}
+
+#loadingPage > div {
+    background-color: green;
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+#loadingPage .rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+}
+
+#loadingPage .rect3 {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+}
+
+#loadingPage .rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+
+#loadingPage .rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+}
+
 #mask {
     position: fixed;
     top: 0px;
@@ -529,17 +583,29 @@ i.SUCCEEDED {
     right: 0px;
     bottom: 0px;
     filter: alpha(opacity=60);
-    background-color: #777;
+    background-color: rgba(119, 119, 119, 0.8);
     z-index: 1000;
     display: none;
-    opacity: 0.8;
-    -moz-opacity: 0.5;
-    padding-top: 100px;
     color: #000000;
 }
-
-#loadingPage {
-    margin: 200px auto;
+.loadingWrap {
+    width: 20%;
+    height: 25%;
+    border: 1px solid #bbb;
+    background-color: #fff;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 20px;
+}
+#loading-page {
     width: 50px;
     height: 40px;
     text-align: center;
@@ -547,7 +613,7 @@ i.SUCCEEDED {
     display: block;
 }
 
-#loadingPage > div {
+#loading-page > div {
     background-color: green;
     height: 100%;
     width: 6px;
@@ -556,26 +622,25 @@ i.SUCCEEDED {
     animation: sk-stretchdelay 1.2s infinite ease-in-out;
 }
 
-#loadingPage .rect2 {
+#loading-page .rect2 {
     -webkit-animation-delay: -1.1s;
     animation-delay: -1.1s;
 }
 
-#loadingPage .rect3 {
+#loadin-page .rect3 {
     -webkit-animation-delay: -1s;
     animation-delay: -1s;
 }
 
-#loadingPage .rect4 {
+#loading-page .rect4 {
     -webkit-animation-delay: -0.9s;
     animation-delay: -0.9s;
 }
 
-#loadingPage .rect5 {
+#loading-page .rect5 {
     -webkit-animation-delay: -0.8s;
     animation-delay: -0.8s;
 }
-
 @-webkit-keyframes sk-stretchdelay {
     0%,
     40%,