본문 바로가기

웹개발/Javascript(JQuery)

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

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


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


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


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


http://fontawesome.io/examples/



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


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


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


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




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



다음으로 CSS 적용하면


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


로딩 완료 후 에는 



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