感谢我的前端大神指导
插件下载地址
链接：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> 文章来源: https://blog.csdn.net/weixin_42338519/article/details/91959972