/*** html 기본 호출 값 : start ***/
시작 : <button onclick="zi_loading.start();">Loading Stop</button>
종료 : <button onclick="zi_loading.stop();">Loading Stop</button>
/*** html 기본 호출 값 : end ***/
/*** 자바스크립트 오브젝트 타입 : start ***/
zi_loading = {
start:function() {
if (document.getElementById('zi-loadpage')) {
return;
}
var DivTag = document.createElement('div');
DivTag.setAttribute('id','zi-loadpage');
DivTag.classList.add('loading-view','loading-effect');
DivTag.innerHTML = '<div class="loading-box"><div class="zicon-doc-woman"></div><span class="loading"><span class="zicon-Like2"></span><span class="zicon-Like2"></span><span class="zicon-Like2"></span><button onclick="zi_loading.stop();"><span class="zicon-Refresh"></span>Loading Stop</button></div>';
document.body.append(DivTag);
},
stop:function() {
var DivTag = document.getElementById('zi-loadpage');
if (DivTag) {
DivTag.remove();
}
}
}
/*** 자바스크립트 오브젝트 타입 : end ***/
/*** 스타일시트 : Start ***/
.loading-view {display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10000;}
.loading-view .loading-box {display:table; width:100%; height:100%; position:relative; color:#fff;}
.loading-view .loading-box .zicon-doc-woman {position:absolute; top:50%; left:50%; margin:-150px 0 0 -50px; font-size:100px; opacity:0.5;}
.loading-view .loading-box .loading {display:table-cell; vertical-align:middle; text-align:center; position:relative; top:-20px;}
.loading-view .loading-box .loading span {margin:2px; font-size:14px;}
.loading-effect .loading-box .loading span:nth-child(1) {animation:load-a 0.5s infinite;}
.loading-effect .loading-box .loading span:nth-child(2) {animation:load-b 0.5s infinite;}
.loading-effect .loading-box .loading span:nth-child(3) {animation:load-c 0.5s infinite;}
@keyframes load-a {
25% {color:#00e492; font-size:18px;}
50% {color:#fff; font-size:18px;}
}
@keyframes load-b {
50% {color:#00e492; font-size:18px;}
75% {color:#fff; font-size:18px;}
}
@keyframes load-c {
75% {color:#00e492; font-size:18px;}
100% {color:#fff; font-size:18px;}
}
/*** 로딩용 스타일 : End ***/
업무에 필요에 의해 작성된 코드이니 실 사용시 스타일은 수정 후 사용해야 함