一个简单的loading

一个简单的loading

一个简单的无图片loading

CSS(无图片)：

/*loading*/.preloader-indicator-modal {position:fixed;left:50%;top:40%;padding:0.4rem;transform:translate(-50%,-50%);;background:rgba(0,0,0,0.8);z-index:11000;border-radius:0.25rem;}.preloader-indicator-modal .preloader {display:block;width:2.5rem;height:2.5rem;}.preloader {display:inline-block;width:1rem;height:1rem;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:preloader-spin 1s steps(12,end) infinite;animation:preloader-spin 1s steps(12,end) infinite;}.preloader:after {display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'{100% {-webkit-transform:rotate(360deg);}}@keyframes {100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}}

JS：

//show loading var loading = new loader(); function loader(){ var load_content_box = document.createElement("div"); load_content_box.className = "preloader-indicator-modal"; load_content_box.id = "loading_id"; var load_content_e = document.createElement("div"); load_content_e.className = "preloader preloader-white"; load_content_box.appendChild(load_content_e); this.show = function(){ document.body.appendChild(load_content_box); }, this.hide = function(){ try{ load_content_box.remove(); }catch(error){ document.body.removeChild(load_content_box); } } }

调用：

loading.show(); //显示loading.hide(); //隐藏

效果如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。