시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 이미지 > CSS 만으로 로딩 이미지를 돌리는 keyframes & animation 활용하기 상세정보
사이트등록
현재접속자 새로고침
CSS 만으로 로딩 이미지를 돌리는 keyframes & animation 활용하기
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 이미지
다운로드 횟수 0 회
간단설명 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 파일에서
테스트 해보셔도 손쉽게 확인이 가능하오니 참고해주세요  ~



네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 54653969 보이는 도배방지키를 입력하세요.