Javascript 로딩바 동적 생성후 Show/Hide

 

자바스크립트로 동적으로 로딩바를 Show, Hide하는 예제입니다.

'use strict';
function Spinner(){
	Spinner.element=document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	let c=document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	Spinner.element.setAttribute('width','50');
	Spinner.element.setAttribute('height','50');	
	c.setAttribute('viewBox','0 0 50 50');
	c.setAttribute('cx','25');
	c.setAttribute('cy','25');
	c.setAttribute('r','21');
	c.setAttribute('stroke-width','8');
	c.setAttribute('stroke','#2196f3');
	c.setAttribute('fill','transparent');
	Spinner.element.appendChild(c);
	Spinner.element.style.cssText='position:absolute;left:calc(50% - 25px);top:calc(50% - 25px)';
	Spinner.element.style.zIndex = 999999;
	document.body.appendChild(Spinner.element);
}
Spinner.id=null;
Spinner.element=null;
Spinner.show=function(){
	if(Spinner.element == null) Spinner();
 
	const c=264,m=15;
	Spinner.element.style.display='block';
	move1();
	function move1(){
		let i=0,o=0;
		move();
		function move(){
			if(i==c)move2();
			else{
				i+=4;o+=8;
				Spinner.element.setAttribute('stroke-dasharray',i+' '+(c-i));
				Spinner.element.setAttribute('stroke-dashoffset',o)
				Spinner.id=setTimeout(move,m)
			}
		}
	}
	function move2(){
		let i=c,o=c*2;
		move();
		function move(){
			if(i==0)move1();
			else{
				i-=4;o+=4;
				Spinner.element.setAttribute('stroke-dasharray',i+' '+(c-i));
				Spinner.element.setAttribute('stroke-dashoffset',o)
				Spinner.id=setTimeout(move,m)
			}
		}
	}
};
Spinner.hide=function(){
	Spinner.element.style.display='none';
	if(Spinner.id){
		clearTimeout(Spinner.id);
		Spinner.id=null
	}
	Spinner.element.setAttribute('stroke-dasharray','0 264');
	Spinner.element.setAttribute('stroke-dashoffset','0')
};


//사용하기 : 로딩바 보이게
Spinner.show();

//사용하기 : 로딩바 안보이게
Spinner.hide();