font-awesome 이용 초 간단 로딩 화면 만들기

css 만을 이용하여 로딩 페이지 만들기!

처음에 gif 파일 이용하여 구현했으나

로딩 시에는 gif도 끊기는 현상이 있어서 의미가 없어 결국 css만으로 구현하니 부드럽게 잘 동작 하더군요

font-awesome이 당연히 있어야 font-awesome을 이용하실 수 있겠고요~

http://fontawesome.io/examples/

홈페이지 exmaples 페이지 중간에 보면 Animated Icons라고해서 

옆에 class만 추가하면 위 종류의 5가지 형식의 로딩 아이콘을 만드실 수 있습니다.

정말 잘 만들어 줬네요 font-awesome!

그 다음은 저걸 페이지에 적용 해야 합니다!

<div id="page-loading"> <i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i> </div>

태그를 먼저 추가해 주시고요

/* page-loading */ #page-loading { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; display: table; background-color: #fff; z-index: 9999; text-align: center; } #page-loading i{ vertical-align: middle; text-align: center; display: table-cell; font-size: 60px; }

다음으로 CSS 적용하면

로딩 페이지 구성 완료입니다!

로딩 완료 후 에는 

$("#page-loading").css("display", "none");

이렇게 두고 언제든 필요할 때 로딩 화면을 띄울 수 있습니다.