html

<div class="loading-dim-layer">
		<div class="loading-klover-dimBg"></div>
		<div id="loading-klover-layer" class="loading-pop-layer">
			<div class="loading-pop-container">
				<div class="loading-pop-conts">						
				<div class="loading">
				      <span></span>   
				      <span></span>
				      <span></span>
				</div>						
				</div>			
			</div>
		</div>
</div> 

 

 

 

 

css

 

.loading-dim-layer .loading-pop-layer .loading-pop-container {padding: 20px 25px;text-align: center;}
.loading-dim-layer .loading-pop-layer p.loading-ctxt {color: #666;line-height: 25px;}
.loading-dim-layer .loading-pop-layer .loading-btn-r {width: 100%;margin: 10px 0 20px;padding-top: 10px;border-top: 1px solid #DDD;text-align: right;}
.loading-dim-layer .loading-pop-layer {display:none;
position: absolute;top: 50%;left: 50%;width: 410px;height: auto;
z-index: 10;}
.loading-dim-layer  {display:none;
position: fixed;_position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;}
.loading-dim-layer .loading-klover-dimBg {position: absolute;top: 0;left: 0;width: 100%;
height: 100%;opacity: .5;
filter: alpha(opacity=50);}
.loading-dim-layer .loading-pop-layer {display: block;}
.loading-dim-layer a.loading-btn-layerClose {display: inline-block;height: 25px;
padding: 0 14px 0;border: 1px solid #faaa40;background-color: #faaa40;font-size: 13px;color: #fff;line-height: 25px;}
.loading-dim-layer a.loading-btn-layerClose:hover {  border: 1px solid #091940;background-color: #1f326a;color: #fff;}

.loading-dim-layer .loading span {
    display: inline-block; /* span 내부요소들을 한줄로 세우기 */
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;    /* span을 동그랗게 */
    animation: loading 1s 0s linear infinite;
    /* 이벤트명  반복시간  딜레이시간  이벤트처리부드럽게  이벤트무한반복*/
    margin: 0 10px;
  }
  
.loading-dim-layer .loading span:nth-child(1) {  /*loading의 자식 중 첫번째 span*/
   /*nth-child : 형제 사이에서의 순서*/
    animation-delay: 0s;
    background-color: red;
  }
  
.loading-dim-layer .loading span:nth-child(2) {
    animation-delay: 0.2s;
    background-color: orange;
  }
  
.loading-dim-layer  .loading span:nth-child(3) {
    animation-delay: 0.4s;
    background-color: yellowgreen;
  }
@keyframes loading {        /*loading이라는 keyframe 애니메이션*/
   0%,                      /* 0, 50, 100은 구간*/
   100% {
     opacity: 0;            /* 안보였다가 */
     transform: scale(0.5); /*transform의 scale로 요소를 확대 또는 축소할 수 있음*/   
   }
   50% {
     opacity: 1;             /* 보였다가 */
     transform: scale(1.2); /* 1.2배 */
   }
 }
 
 
 

 

 

 

 

js

//로딩바 시작 함수
function loading_pop_klover() {

	var $el = $('#loading-klover-layer');        //레이어의 id를 $el 변수에 저장
	var isDim = $el.prev().hasClass('loading-klover-dimBg');    //dimmed 레이어를 감지하기 위한 boolean 변수
	

	isDim ? $('.loading-dim-layer').fadeIn() : $el.fadeIn();

	var $elWidth = ~~($el.outerWidth()),
		$elHeight = ~~($el.outerHeight()),
		docWidth = $(document).width(),
		docHeight = $(document).height();

	// 화면의 중앙에 레이어를 띄운다.
	if ($elHeight < docHeight || $elWidth < docWidth) {
		$el.css({
			marginTop: -$elHeight / 2,
			marginLeft: -$elWidth / 2
		})
	} else {
		$el.css({ top: 0, left: 0 });
	}
	
	return false;
}
//로딩바 닫기합수
function loadingnBtnLayerClose(){
	$('.loading-dim-layer').fadeOut();	
}