css實現進度載入動畫
阿新 • • 發佈：2019-01-07
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #circle{ position: absolute; left:45%; top:200px; } </style> </head> <body> <div id="circle"> </div> </body> <script> function Loading(setting) { this.settings ={ animationTime:5,//動畫執行時間 divId:"circle",//div盒子的id divWidth:"200px",//盒子的寬度 divHeight:"200px", // 盒子的高度 divClassName: "active", //新增class名字後就會執行載入動畫 leftDivName:"left", //第一個盒子的class名字 rightDivName:"right", //內部第二個盒子的class名字 infinite:true, // 是否迴圈 loadingWidth:"10px", //圓圈寬度 loadingColor:"#000" //圓圈的顏色 }; this.timeOut = null; //延遲器 if(setting){ for(var i in setting){ this.settings[i] = setting[i]; } } this.prefix = function () { var div = document.createElement('div'); var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;'; div.style.cssText = cssText; var style = div.style; if (style.webkitTransition) { return '-webkit-'; } if (style.MozTransition) { return '-moz-'; } if (style.oTransition) { return '-o-'; } if (style.msTransition) { return '-ms-'; } return ''; }; this.runOne = function (callback) { var that = this; //呼叫執行一次 this.div.classList.add(this.settings.divClassName); this.timeOut = setTimeout(function () { that.div.classList.remove(that.settings.divClassName); callback.call(that.div,that.div); },+that.settings.animationTime*1000) }; this.runForever = function () { this.div.classList.add(this.settings.divClassName); }; var div = this.div = document.getElementById(this.settings.divId); div.style.cssText = "border-radius:50%; width:"+this.settings.divWidth+"; height:"+this.settings.divHeight+"; clip:rect(0,"+div.offsetWidth+"px,"+div.offsetHeight+"px,"+div.offsetWidth/2+"px);;"; var left = document.createElement("div"); left.className = this.settings.leftDivName; var right = document.createElement("div"); right.className = this.settings.rightDivName; var style = document.createElement("style"); div.appendChild(left); div.appendChild(right); style.innerText = "" + "@"+this.prefix()+"keyframes circle-animation {" + " 0%{clip:rect(0,"+div.offsetWidth+"px,"+div.offsetHeight+"px,"+div.offsetWidth/2+"px);}" + " 100%{clip:auto;}" + "}\n" + "@"+this.prefix()+"keyframes left-animation {" + " 0%{transform: rotate(-45deg);}" + " 50%{transform: rotate(135deg);}" + " 100%{transform: rotate(315deg);}" + "}\n" + "@"+this.prefix()+"keyframes right-animation {" + " 0%{transform: rotate(-45deg);}" + " 50%{transform: rotate(135deg);}" + " 100%{transform: rotate(135deg);}" + "}\n" + "#"+this.settings.divId+"."+this.settings.divClassName+"{" + " "+this.prefix()+"animation: circle-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+";" + "}\n" + "#"+this.settings.divId+" ."+this.settings.leftDivName+",#"+this.settings.divId+" ."+this.settings.rightDivName+"{" + " border-left:"+this.settings.loadingWidth+" solid "+this.settings.loadingColor+";" + " border-top:"+this.settings.loadingWidth+" solid "+this.settings.loadingColor+";" + " border-right:"+this.settings.loadingWidth+" solid rgba(0,0,0,0);" + " border-bottom:"+this.settings.loadingWidth+" solid rgba(0,0,0,0);" + " transform: rotate(-45deg);" + " position:absolute;" + " left:0;" + " top:0;" + " width:100%;" + " height:100%;" + " border-radius:50%;" + " box-sizing:border-box;" + "}\n" + "#"+this.settings.divId+"."+this.settings.divClassName+" ."+this.settings.leftDivName+"{" + " "+this.prefix()+"animation: left-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+ "}\n" + "#"+this.settings.divId+"."+this.settings.divClassName+" ."+this.settings.rightDivName+"{" + " "+this.prefix()+"animation: right-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+ "}\n" + ""; document.head.appendChild(style); } var obj = new Loading({divId:"circle"}); //例項化建構函式 obj.runOne(function () { //只執行一次，外加傳入一個匿名函式 console.log("動畫執行完成"); obj.runForever(); // 呼叫一直執行的函式 }); </script> </html>