[해피CGI][cgimall] CSS 만으로 로딩 이미지를 돌리는 keyframes & animation 활용하기

CSS만으로 로딩이미지를 쉽게 만들 수 있습니다.

gif애니메이션의 로딩이미지를 별도로 제작할 필요 없이 CSS만으로 쉽게 사용이 가능해 간편합니다.

 

 

 

준비할것은 8컷의 로딩이미지가 담긴 PNG1장 입니다.
아래와 같이 html상에는 loader라는 클래스명을 지정하여 줍니다.


html

<div class="loader">Loading…</div>

그리고 나서, 아래와 같이 CSS 를 선언하여 줍니다.
아래에 infinite steps(8)값을 바꿔보면 아시겠지만, 위에서 만든 PNG1장을 8칸으로 나누어
애니메이션처럼 보여지게 한다보면 됩니다.


CSS

@keyframes loader {
to { background-position: -800px 0; }
}

.loader {
width: 100px; height: 100px;
text-indent: 999px; overflow: hidden; /* Hide text */
background: url(http://dabblet.com/img/loader.png) 0 0;
animation: loader 1s infinite steps(8);
}

별도의 JS나 GIF 파일 없이도,
손쉽게 구동되는 로딩이미지로 시간을 단축시킬 수 있습니다.

PNG 이미지는 위의 해외사이트에서 참고만 하였고,
실제로 여러분 사이트에 적용할때는 반드시 자체 이미지로 적용해보시기 바랍니다.

*) 실제 구동되는 데모페이지는 별도로 없습니다. 로컬에서 html 파일에서
테스트 해보셔도 손쉽게 확인이 가능하오니 참고해주세요  ~