로딩바 만들기

간단하게 만들수 있는 로딩바 소스를 올리려고 한다. 

원리는 간단하다. 

로딩 프로그레스를 구현하고 싶은 모양이 동그랗게 돌기를 원한다면, 

먼저 동그랗게 도는것 같은 이미지를 하나 구해온다. 

그리고 

구조를 이렇게 잡는다. 

<div class="loading">

 <div class="dim"></div>

 <div class="target"></div>

</div>

html은 이게 전부 이다. 

wrap에 붙이던 컨텐츠의 제일 끝 자식 요소에 붙이던 상관없다. 원하는 위치에 붙이면 된다. body 안에

css는 

.loading {position:relative; z-index:1000}

.loading .dim {position:fixed; left:0; top:0; z-index:950; width:100%; height:100%; background:/* dim 처리를 하고싶다면, colour 값을 넣고, 오퍼시티를 주면 된다. */}

.loading .target {position:fixed; left:50%; top:50%; z-index:1000; width:100px/*돌리는 이미지 넓이*/; height:100px /* 돌리는 이미지 높이 */; background:url(../img/ 이미지 경로.png) no-repeat 0 0; background-size:cover; animation:roll 3s linear infinite; -webkit-animation:roll 3s linear infinite;} 

@keyframes roll {

0% {transform:rotate(0deg)}

100% {transform:rotate(360deg)}

}

간단히 설명하면, 화면을 고정시킬 div를 만들고 그안에 여기에서 사용할 dim div를 만든다. 

그리고 z-index를 낮춰서 무조건 target보다 뒤로 오게 한 후, target을 센터에 위치 시키고, transform으로 rotate를 

animation으로 영원히 infinite로 돌리는 것. 

 

만약 이게 도는 중에 윈도우의 스크롤을 막고 싶다면, 

html, body {overflow:hidden; height:100%;} 를 스크립트로 주면 된다.

해제하고자 한다면, html, body {overflow:visible; height:auto;} 를 주면 된다.