h5基于jq加载中动画

js动态插入执行方法（）

function loadingAnimation(){ var loading = '<div class="loading_box">\ <div class="loading_content">\ <div class="loading_list">\ <div class="loading_div"></div>\ </div>\ <div class="loading_list">\ <div class="loading_div"></div>\ </div>\ <div class="loading_list">\ <div class="loading_div"></div>\ </div>\ </div>'; $("body").append(loading); }

关闭动画

function closeLoading(){ $(".loading_box").remove(); }

css样式

/*加载中*/ .loading_box{ position: fixed; top:0; left:0; width:100%; height:100%; z-index: 1000; } .loading_box img{ width:1rem; height:1rem; position: fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); } .loading_content{ position: fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); } .loading_list{ float:left; overflow: hidden; width:0.5rem; height:0.5rem; text-align: center; font-size:0; position: relative; } .loading_div{ position: absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); margin-right:0.1rem; height:0.2rem; width:0.2rem; border-radius: 50%; background:#aaa; animation: myfirst 1.5s; -moz-animation: myfirst 1.5s; /* Firefox */ -webkit-animation: myfirst 1.5s; /* Safari 和 Chrome */ -o-animation: myfirst 1.5s; /* Opera */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } .loading_list:nth-child(2) .loading_div{ animation-delay:0.3s; -webkit-animation-delay:0.3s; -moz-animation-delay:0.3s; -o-animation-delay:0.3s; } .loading_list:nth-child(3) .loading_div{ animation-delay:0.6s; -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; -o-animation-delay:0.6s; } @keyframes myfirst { 50% {width:0.4rem;height:0.4rem} 100% {width:0.2rem;height:0.2rem} } @-moz-keyframes myfirst{ 50% {width:0.4rem;height:0.4rem} 100% {width:0.2rem;height:0.2rem} } @-webkit-keyframes myfirst{ 50% {width:0.4rem;height:0.4rem} 100% {width:0.2rem;height:0.2rem} } @-o-keyframes myfirst{ 50% {width:0.4rem;height:0.4rem} 100% {width:0.2rem;height:0.2rem} }