spin.js 4.25 KB
!function(t,e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Spinner=e()}(this,function(){"use strict";function t(t,e){var i,o=document.createElement(t||"div");for(i in e)o[i]=e[i];return o}function e(t){for(var e=1,i=arguments.length;e<i;e++)t.appendChild(arguments[e]);return t}function i(t,e,i,o){var n=["opacity",e,~~(100*t),i,o].join("-"),r=.01+i/o*100,s=Math.max(1-(1-t)/e*(100-r),t),a=f.substring(0,f.indexOf("Animation")).toLowerCase(),l=a&&"-"+a+"-"||"";return p[n]||(c.insertRule("@"+l+"keyframes "+n+"{0%{opacity:"+s+"}"+r+"%{opacity:"+t+"}"+(r+.01)+"%{opacity:1}"+(r+e)%100+"%{opacity:"+t+"}100%{opacity:"+s+"}}",c.cssRules.length),p[n]=1),n}function o(t,e){var i,o,n=t.style;if(void 0!==n[e])return e;for(e=e.charAt(0).toUpperCase()+e.slice(1),o=0;o<d.length;o++)if(i=d[o]+e,void 0!==n[i])return i}function n(t,e){for(var i in e)t.style[o(t,i)||i]=e[i];return t}function r(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)void 0===t[o]&&(t[o]=i[o])}return t}function s(t){for(var e={x:t.offsetLeft,y:t.offsetTop};t=t.offsetParent;)e.x+=t.offsetLeft,e.y+=t.offsetTop;return e}function a(t){return"undefined"==typeof this?new a(t):void(this.opts=r(t||{},a.defaults,u))}function l(){function i(e,i){return t("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',i)}c.addRule(".spin-vml","behavior:url(#default#VML)"),a.prototype.lines=function(t,o){function r(){return n(i("group",{coordsize:f+" "+f,coordorigin:-l+" "+-l}),{width:f,height:f})}function s(t,s,a){e(p,e(n(r(),{rotation:360/o.lines*t+"deg",left:~~s}),e(n(i("roundrect",{arcsize:o.corners}),{width:l,height:o.width,left:o.radius,top:-o.width>>1,filter:a}),i("fill",{color:o.color,opacity:o.opacity}),i("stroke",{opacity:0}))))}var a,l=o.length+o.width,f=2*l,d=2*-(o.width+o.length)+"px",p=n(r(),{position:"absolute",top:d,left:d});if(o.shadow)for(a=1;a<=o.lines;a++)s(a,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(a=1;a<=o.lines;a++)s(a);return e(t,p)},a.prototype.opacity=function(t,e,i,o){var n=t.firstChild;o=o.shadow&&o.lines||0,n&&e+o<n.childNodes.length&&(n=n.childNodes[e+o],n=n&&n.firstChild,n=n&&n.firstChild,n&&(n.opacity=i))}}var f,d=["webkit","Moz","ms","O"],p={},c=function(){var i=t("style",{type:"text/css"});return e(document.getElementsByTagName("head")[0],i),i.sheet||i.styleSheet}(),u={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"};a.defaults={},r(a.prototype,{spin:function(e){this.stop();var i,o,r=this,a=r.opts,l=r.el=n(t(0,{className:a.className}),{position:a.position,width:0,zIndex:a.zIndex}),d=a.radius+a.length+a.width;if(e&&(e.insertBefore(l,e.firstChild||null),o=s(e),i=s(l),n(l,{left:("auto"==a.left?o.x-i.x+(e.offsetWidth>>1):parseInt(a.left,10)+d)+"px",top:("auto"==a.top?o.y-i.y+(e.offsetHeight>>1):parseInt(a.top,10)+d)+"px"})),l.setAttribute("role","progressbar"),r.lines(l,r.opts),!f){var p,c=0,u=(a.lines-1)*(1-a.direction)/2,h=a.fps,y=h/a.speed,m=(1-a.opacity)/(y*a.trail/100),v=y/a.lines;!function t(){c++;for(var e=0;e<a.lines;e++)p=Math.max(1-(c+(a.lines-e)*v)%y*m,a.opacity),r.opacity(l,e*a.direction+u,p,a);r.timeout=r.el&&setTimeout(t,~~(1e3/h))}()}return r},stop:function(){var t=this.el;return t&&(clearTimeout(this.timeout),t.parentNode&&t.parentNode.removeChild(t),this.el=void 0),this},lines:function(o,r){function s(e,i){return n(t(),{position:"absolute",width:r.length+r.width+"px",height:r.width+"px",background:e,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/r.lines*l+r.rotate)+"deg) translate("+r.radius+"px,0)",borderRadius:(r.corners*r.width>>1)+"px"})}for(var a,l=0,d=(r.lines-1)*(1-r.direction)/2;l<r.lines;l++)a=n(t(),{position:"absolute",top:1+~(r.width/2)+"px",transform:r.hwaccel?"translate3d(0,0,0)":"",opacity:r.opacity,animation:f&&i(r.opacity,r.trail,d+l*r.direction,r.lines)+" "+1/r.speed+"s linear infinite"}),r.shadow&&e(a,n(s("#000","0 0 4px #000"),{top:"2px"})),e(o,e(a,s(r.color,"0 0 1px rgba(0,0,0,.1)")));return o},opacity:function(t,e,i){e<t.childNodes.length&&(t.childNodes[e].style.opacity=i)}});var h=n(t("group"),{behavior:"url(#default#VML)"});return!o(h,"transform")&&h.adj?l():f=o(h,"animation"),a});