https://c-on.co.kr/weven_service/asset/js/bm2/loader/ProgressBar.js

1/**
2
3 * User: kjh
4 * Date: 15. 1. 24
5 * Time: 오후 6:21
6 * 아래의 소스는 WEVEN에 저작권이 있으므로 무단 사용 및 재 배포를 금합니다.
7 */
8
9
10
11/**
12 * Spinner
13 */
14!function(e,t,n){function o(e,n){var r=t.createElement(e||"div"),i;for(i in n)r[i]=n[i];return r}function u(e){for(var t=1,n=arguments.length;t<n;t++)e.appendChild(arguments[t]);return e}function f(e,t,n,r){var o=["opacity",t,~~(e*100),n,r].join("-"),u=.01+n/r*100,f=Math.max(1-(1-e)/t*(100-u),e),l=s.substring(0,s.indexOf("Animation")).toLowerCase(),c=l&&"-"+l+"-"||"";return i[o]||(a.insertRule("@"+c+"keyframes "+o+"{"+"0%{opacity:"+f+"}"+u+"%{opacity:"+e+"}"+(u+.01)+"%{opacity:1}"+(u+t)%100+"%{opacity:"+e+"}"+"100%{opacity:"+f+"}"+"}",a.cssRules.length),i[o]=1),o}function l(e,t){var i=e.style,s,o;if(i[t]!==n)return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(o=0;o<r.length;o++){s=r[o]+t;if(i[s]!==n)return s}}function c(e,t){for(var n in t)e.style[l(e,n)||n]=t[n];return e}function h(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)e[i]===n&&(e[i]=r[i])}return e}function p(e){var t={x:e.offsetLeft,y:e.offsetTop};while(e=e.offsetParent)t.x+=e.offsetLeft,t.y+=e.offsetTop;return t}var r=["webkit","Moz","ms","O"],i={},s,a=function(){var e=o("style",{type:"text/css"});return u(t.getElementsByTagName("head")[0],e),e.sheet||e.styleSheet}(),d={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto"},v=function m(e){if(!this.spin)return new m(e);this.opts=h(e||{},m.defaults,d)};v.defaults={},h(v.prototype,{spin:function(e){this.stop();var t=this,n=t.opts,r=t.el=c(o(0,{className:n.className}),{position:"relative",width:0,zIndex:n.zIndex}),i=n.radius+n.length+n.width,u,a;e&&(e.insertBefore(r,e.firstChild||null),a=p(e),u=p(r),c(r,{left:(n.left=="auto"?a.x-u.x+(e.offsetWidth>>1):parseInt(n.left,10)+i)+"px",top:(n.top=="auto"?a.y-u.y+(e.offsetHeight>>1):parseInt(n.top,10)+i)+"px"})),r.setAttribute("aria-role","progressbar"),t.lines(r,t.opts);if(!s){var f=0,l=n.fps,h=l/n.speed,d=(1-n.opacity)/(h*n.trail/100),v=h/n.lines;(function m(){f++;for(var e=n.lines;e;e--){var i=Math.max(1-(f+e*v)%h*d,n.opacity);t.opacity(r,n.lines-e,i,n)}t.timeout=t.el&&setTimeout(m,~~(1e3/l))})()}return t},stop:function(){var e=this.el;return e&&(clearTimeout(this.timeout),e.parentNode&&e.parentNode.removeChild(e),this.el=n),this},lines:function(e,t){function i(e,r){return c(o(),{position:"absolute",width:t.length+t.width+"px",height:t.width+"px",background:e,boxShadow:r,transformOrigin:"left",transform:"rotate("+~~(360/t.lines*n+t.rotate)+"deg) translate("+t.radius+"px"+",0)",borderRadius:(t.corners*t.width>>1)+"px"})}var n=0,r;for(;n<t.lines;n++)r=c(o(),{position:"absolute",top:1+~(t.width/2)+"px",transform:t.hwaccel?"translate3d(0,0,0)":"",opacity:t.opacity,animation:s&&f(t.opacity,t.trail,n,t.lines)+" "+1/t.speed+"s linear infinite"}),t.shadow&&u(r,c(i("#000","0 0 4px #000"),{top:"2px"})),u(e,u(r,i(t.color,"0 0 1px rgba(0,0,0,.1)")));return e},opacity:function(e,t,n){t<e.childNodes.length&&(e.childNodes[t].style.opacity=n)}}),function(){function e(e,t){return o("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',t)}var t=c(o("group"),{behavior:"url(#default#VML)"});!l(t,"transform")&&t.adj?(a.addRule(".spin-vml","behavior:url(#default#VML)"),v.prototype.lines=function(t,n){function s(){return c(e("group",{coordsize:i+" "+i,coordorigin:-r+" "+ -r}),{width:i,height:i})}function l(t,i,o){u(a,u(c(s(),{rotation:360/n.lines*t+"deg",left:~~i}),u(c(e("roundrect",{arcsize:n.corners}),{width:r,height:n.width,left:n.radius,top:-n.width>>1,filter:o}),e("fill",{color:n.color,opacity:n.opacity}),e("stroke",{opacity:0}))))}var r=n.length+n.width,i=2*r,o=-(n.width+n.length)*2+"px",a=c(s(),{position:"absolute",top:o,left:o}),f;if(n.shadow)for(f=1;f<=n.lines;f++)l(f,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(f=1;f<=n.lines;f++)l(f);return u(t,a)},v.prototype.opacity=function(e,t,n,r){var i=e.firstChild;r=r.shadow&&r.lines||0,i&&t+r<i.childNodes.length&&(i=i.childNodes[t+r],i=i&&i.firstChild,i=i&&i.firstChild,i&&(i.opacity=n))}):s=l(t,"animation")}(),typeof define=="function"&&define.amd?define(function(){return v}):e.Spinner=v}(window,document);
15
16
17var opts = {
18    lines: 15, // The number of lines to draw
19    length: 15, // The length of each line
20    width: 2, // The line thickness
21    radius: 10, // The radius of the inner circle
22    corners: 0.6, // Corner roundness (0..1)
23    rotate: 28, // The rotation offset
24    color: '#777', // #rgb or #rrggbb
25    speed: 0.4, // Rounds per second
26    trail: 32, // Afterglow percentage
27    shadow: true, // Whether to render a shadow
28    hwaccel: true, // Whether to use hardware acceleration
29    className: 'spinner', // The CSS class to assign to the spinner
30    zIndex: 2e9, // The z-index (defaults to 2000000000)
31    top: '50%', // Top position relative to parent in px
32    left: '50%' // Left position relative to parent in px
33};
34
35var spinner = new Spinner(opts);
36
37var Progress = {
38
39    con : null,
40    bar : null,
41    status : 0,
42    progressCnt : 0,
43    forcedeSetting : false,
44    progressTimer : null,
45    progressDelay : null,
46    use : true,
47
48    disable : function(){
49        this.use = false;
50    },
51
52    enable : function(){
53        this.use = true;
54    },
55
56    forcedeON : function(){
57        if( this.use == false ) return;
58
59        this.forcedeSetting = true;
60        this.progressCnt = 0;
61        this.status = 1;
62        // this.bar.style.height = document.body.scrollHeight + "px";
63        bm.addChild( this.bar, window.document.body );
64        //spinner.spin( this.con );
65    },
66
67    forcedeOFF : function(){
68        if( this.use == false ) return;
69
70        this.forcedeSetting = false;
71        this.progressCnt = 0;
72        this.status = 0;
73        spinner.stop();
74        window.document.body.removeChild( this.bar );
75        $(this.con).css("opacity", 0);
76    },
77
78    ON : function( delayMs ){
79        if( this.use == false ) return;
80        if( this.forcedeSetting ) return;
81        
82        var _this = this;
83        delayMs = delayMs || 500;
84        
85        this.progressCnt++;
86        if( this.status == 1 ) return;
87        this.status = 1;
88
89        this.bar.style.height = document.body.scrollHeight + "px";
90        bm.addChild( this.bar, window.document.body );
91        $(_this.con).css("opacity", 0);
92        this.progressDelay = setTimeout( function(){
93            $(_this.con).css("opacity", 1);
94        }, delayMs);
95        //spinner.spin( this.con );
96
97        clearInterval( this.progressTimer );
98        this.progressTimer = setInterval( function(){
99            if( this.progressCnt > 0 ){
100                alert( "정상처리되지 않았습니다. 다시 시도해주세요.");
101                _this.forcedeOFF();
102            }
103        }, 30000 );
104    },
105
106    OFF : function(){
107        if( this.progressUse == false ) return;
108        if( this.forcedeSetting ) return;
109        if( this.progressCnt == 0 ) return;
110
111        this.progressCnt--;
112        if( this.progressCnt > 0 ) return;
113        if( this.status == 0 ) return;
114        this.status = 0;
115        spinner.stop();
116        window.document.body.removeChild( this.bar );
117        $(this.con).css("opacity", 0);
118        clearTimeout( this.progressDelay );
119
120        clearInterval( this.progressTimer );
121        this.progressTimer = setTimeout(function() {
122            if($('#loading-center')['length'] > 0) {
123                Progress.forcedeOFF();
124            }
125        },5000);
126    }
127}
128
129// Progress.con = bm.html('<div id="loading-center"> <div id="loading-center-absolute"> <div class="object" id="object_one"></div> <div class="object" id="object_two"></div> <div class="object" id="object_three"></div> <div class="object" id="object_four"></div> </div> </div>');
130Progress.con = bm.html('<div id="loading-center"> <div id="dot-loader"><div></div><div></div><div></div></div> </div>');
131// 백그라운드 제거.
132Progress.bar = bm.html('<div id="loader"></div>');
133// 백그라운드 존재.
134//Progress.bar = bm.html('<div style="width:100%; height:100%; text-align: center; position: fixed; top: 0; left: 0; z-index: 999999999; background: #000; opacity: 0.5; filter:alpha(opacity=00);"></div>');
135Progress.bar.appendChild( Progress.con );