效果图：
js创建loading
show = function(){ ???//loading dom元素 ???var Div = document.createElement("div"); ???Div.setAttribute("class","ui-loading"); ???var chidDiv = document.createElement("div"); ???chidDiv.setAttribute("class","ui-loading-mask") ???Div.appendChild(chidDiv) ???document.body.appendChild(Div)}取消loading加载
hide= function(){ ???var Div = document.getElementsByClassName("ui-loading"); ????while(Div[0].hasChildNodes()) //当div下还存在子节点时 循环继续 ????{ ????????Div[0].removeChild(Div[0].firstChild); ????} ????var par = Div[0].parentNode; ???par.removeChild(Div[0])}定义加载动画css样式
/* * ???loading加载动画样式 */.ui-loading{ ???position: fixed; ???top: 0; ???right: 0; ???bottom: 0; ???left: 0; ???z-index: 998; ???background-color: rgba(0,0,0,.4);}.ui-loading-mask{ ???width: 6px; ???height: 6px; ???border-radius: 50%; ???-webkit-animation: typing 1s linear infinite alternate; ??????-moz-animation: Typing 1s linear infinite alternate; ???????????animation: typing 1s linear infinite alternate; ???margin: 80% auto 0; /* Not necessary- its only for layouting*/ ?????position: relative; ???left: -12px;}@-webkit-keyframes typing{ ???0%{ ???????background-color: rgba(255,255,255, 1); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,0.2); ?????} ???25%{ ????????background-color: rgba(255,255,255, 0.4); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), ????????????????????24px 0px 0px 0px rgba(255,255,255,0.2); ???} ???75%{ background-color: rgba(255,255,255, 0.4); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,1); ?????}}@-moz-keyframes typing{ ??0%{ ???????background-color: rgba(255,255,255, 1); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,0.2); ?????} ???25%{ ????????background-color: rgba(255,255,255, 0.4); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), ????????????????????24px 0px 0px 0px rgba(255,255,255,0.2); ???} ???75%{ background-color: rgba(255,255,255, 0.4); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,1); ?????}}@keyframes typing{ ??0%{ ???????background-color: rgba(255,255,255, 1); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,0.2); ?????} ???25%{ ????????background-color: rgba(255,255,255, 0.6); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), ????????????????????24px 0px 0px 0px rgba(255,255,255,0.2); ???} ???75%{ background-color: rgba(255,255,255, 0.4); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,1); ?????} ?????100%{ background-color: rgba(255,255,255, 0.1); ???????box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), ????????????????????24px 0px 0px 0px rgba(255,255,255,1); ?????}}原生JS+ CSS3创建loading加载动画；
原文地址：https://www.cnblogs.com/Tohold/p/10184343.html