这个是本人写的一个小插件，实现的功能也很有限，就是能够使用圆形加载的效果。
<!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{
left:45%;
top:200px;
}
</style>
</head>
<body>
<div id="circle">
</div>
</body>
<script>
function Loading(setting) {
this.settings ={
animationTime:2,//动画执行时间
divId:null,//div盒子的idClass
divWidth:"20px",//盒子的宽度
divHeight:"20px", // 盒子的高度
divLoadClassName: "spinner", //添加class名字后就会执行加载动画
divClass:"wrap-box",//两个盒子外面的盒子class
leftWrapDivName:"leftWrap-box", //第一个盒子的class名字
leftDivName:"left-box", //第一个盒子的class名字
rightWrapDivName:"rightWrap-box", //内部第二个盒子的class名字
rightDivName:"right-box", //内部第二个盒子的class名字
infinite:true, // 是否循环
loadingWidth:"1px", //圆圈宽度
loadingColor:"#30aee0" //圆圈的颜色
};
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.divLoadClassName);
this.timeOut = setTimeout(function () {
that.div.classList.remove(that.settings.divLoadClassName);
callback.call(that.div,that.div);
},+that.settings.animationTime*1000);
};
this.runForever = function () {
this.div.classList.add(this.settings.divLoadClassName);
};
this.remove = function () {
this.leftWrap.parentNode.removeChild(this.leftWrap);
this.rightWrap.parentNode.removeChild(this.rightWrap);
this.style.parentNode.removeChild(this.style);
};
if(typeof(this.settings.divId) == "object"){
var div = this.div = this.settings.divId;
this.settings.divId = this.div.id;
}else{
var div = this.div = document.getElementById(this.settings.divId);
}
div.style.cssText = "border-radius:50%; width:"+this.settings.divWidth+"; height:"+this.settings.divHeight+";";
if(!div.style.position){
div.style.position = "absolute";
}
var leftWrap = this.leftWrap = document.createElement("div");
leftWrap.className = this.settings.divClass+" "+this.settings.leftWrapDivName;
var rightWrap = this.rightWrap = document.createElement("div");
rightWrap.className = this.settings.divClass+" "+this.settings.rightWrapDivName;
var left = document.createElement("div");
left.className = this.settings.leftDivName;
var right = document.createElement("div");
right.className = this.settings.rightDivName;
var style = this.style = document.createElement("style");
leftWrap.appendChild(left);
rightWrap.appendChild(right);
div.appendChild(leftWrap);
div.appendChild(rightWrap);
style.innerText = "" +
"@"+this.prefix()+"keyframes left-animation {" +
" 0%{transform: rotate(135deg);}" +
" 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.divClass+"{" +
" position:absolute; top:0; width:"+div.offsetWidth/2+"px; height:"+div.offsetHeight+"px; overflow:hidden;" +
"}\n" +
"#"+this.settings.divId+" ."+this.settings.rightWrapDivName+"{" +
" right:0;" +
"}\n" +
"#"+this.settings.divId+" ."+this.settings.leftWrapDivName+"{" +
" left:0;" +
"}\n" +
"#"+this.settings.divId+":after{" +
" content:''; display:block; height:4px; width:4px; position:absolute; top:50%; left:50%; margin-top:-2px; margin-left:-2px; background:"+this.settings.loadingColor+"; border-radius:50%;" +
"}\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 transparent;" +
" border-bottom:"+this.settings.loadingWidth+" solid transparent;" +
" position:absolute;" +
" top:0;" +
" width:"+div.offsetWidth+"px;" +
" height:100%;" +
" border-radius:50%;" +
" box-sizing:border-box;" +
"}\n" +
"#"+this.settings.divId+" ."+this.settings.leftDivName+"{" +
" transform: rotate(135deg); left:0;" +
"}\n"+
"#"+this.settings.divId+" ."+this.settings.rightDivName+"{" +
" transform: rotate(-45deg); right:0;" +
"}\n"+
"#"+this.settings.divId+"."+this.settings.divLoadClassName+" ."+this.settings.leftDivName+"{" +
" "+this.prefix()+"animation: left-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+
"}\n" +
"#"+this.settings.divId+"."+this.settings.divLoadClassName+" ."+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>
以上就是全部代码加案例，需要在实例化的时候传入一个对象，对象里面需要传入html里面一个div盒子的id，这样就可以自动生成相关效果。
var obj = new Loading({divId:"circle"}); //实例化构造函数所有可以配置项为：
{
animationTime:2,//动画执行时间
divId:null,//div盒子的idClass
divWidth:"20px",//盒子的宽度
divHeight:"20px", // 盒子的高度
divLoadClassName: "spinner", //添加class名字后就会执行加载动画
divClass:"wrap-box",//两个盒子外面的盒子class
leftWrapDivName:"leftWrap-box", //第一个盒子的class名字
leftDivName:"left-box", //第一个盒子的class名字
rightWrapDivName:"rightWrap-box", //内部第二个盒子的class名字
rightDivName:"right-box", //内部第二个盒子的class名字
infinite:true, // 是否循环
loadingWidth:"1px", //圆圈宽度
loadingColor:"#30aee0" //圆圈的颜色
}实例化成功了以后，需要调用相关方法：
只显示加载动画一次：
obj.runOne();
可以传入回调函数。
能无限加载的动画：
obj.runForever();
将加载功能删除：
obj.remove();
已知bug：如果设置的加载图形过大，会发现底部有一条白色的细缝，现在还没有解决。由于这个效果博主是要使用到vr上面，在小尺寸上面看不出来效果，为了赶项目，先把问题保留。
