感谢我的前端大神指导
插件下载地址
链接：https://pan.baidu.com/s/1wwGLrlJld4Oa2gXvHIQJ4Q
提取码：tbub
样式展示
由于css中的内容冲突引入导致很多问题在前端的指导下将css全部提出，引入loading.js即可直接使用
<%--loading插件的css--%>
<style>
.cpt-loading-mask.column {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
z-index: 100;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
background: rgba(0, 0, 0, 0.2);
z-index: 1000001;
position: fixed;
}
.fadeInNoTransform {
-webkit-animation-name: fadeInNoTransform;
animation-name: fadeInNoTransform;
}
@keyframes fadeInNoTransform {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.cpt-loading-mask.column .div-loading {
position: absolute;
top: 50%;
left: 50%;
background: rgba(0, 0, 0, 0.6);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
padding: 16px;
background: rgba(0, 0, 0, 0.6);
width: 240px;
border-radius: 12px;
}
.cpt-loading-mask * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cpt-loading-mask.column .div-loading .loading-title {
width: 100%;
text-align: center;
color: #fff;
padding: 2px 0;
font-size: 16px;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
color: rgba(255, 255, 255, 0.7);
}
.cpt-loading-mask.column .div-loading .loading {
position: relative;
background: transparent;
margin: 0 auto;
width: 40px;
height: 40px;
}
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(1) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.cpt-loading-mask.column .div-loading .loading.origin div {
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-animation: load 2.28s linear infinite;
-webkit-animation: load 2.28s linear infinite;
animation: load 2.28s linear infinite;
}
@keyframes load {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transform: rotate(160deg);
-ms-transform: rotate(160deg);
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
}
62% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
65% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(200deg);
-ms-transform: rotate(200deg);
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
}
90% {
-moz-transform: rotate(340deg);
-ms-transform: rotate(340deg);
-webkit-transform: rotate(340deg);
transform: rotate(340deg);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.cpt-loading-mask.column .div-loading .loading.origin div span {
display: inline-block;
border-radius: 50%;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
width: 6px;
height: 6px;
background: rgb(254, 254, 254);
}
.cpt-loading-mask.column .div-loading .loading-discription {
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
margin-top: 19px;
}
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(2) {
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.cpt-loading-mask.column .div-loading .loading.origin div {
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-animation: load 2.28s linear infinite;
-webkit-animation: load 2.28s linear infinite;
animation: load 2.28s linear infinite;
}
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(3) {
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.cpt-loading-mask.column .div-loading .loading.origin div {
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-animation: load 2.28s linear infinite;
-webkit-animation: load 2.28s linear infinite;
animation: load 2.28s linear infinite;
}
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(4) {
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.cpt-loading-mask.column .div-loading .loading.origin div {
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-animation: load 2.28s linear infinite;
-webkit-animation: load 2.28s linear infinite;
animation: load 2.28s linear infinite;
}
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(5) {
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.cpt-loading-mask.column .div-loading .loading.origin div {
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-animation: load 2.28s linear infinite;
-webkit-animation: load 2.28s linear infinite;
animation: load 2.28s linear infinite;
}
</style>