반응형


자바스크립트로 동적으로 로딩바를 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();
반응형
'웹 > javascript' 카테고리의 다른 글
Javascript 싱글톤 패턴 모듈, 모듈+네임스페이스 패턴 2개 (0) | 2021.11.18 |
---|---|
Javascript 객체 정의 방법, 클로져 IIES 패턴 모듈, 클로져 생성자 패턴 모듈 (0) | 2021.11.18 |
Javascript Prototype(프로토타입) (0) | 2021.11.18 |
Javascript 즉시실행함수(IIFE), 클로져(Closure) (0) | 2021.11.18 |
Javascript Math, alert, confirm, prompt (0) | 2021.11.18 |
최근댓글