1. 로딩 이미지
https://preloaders.net/ 무료 이미지사이트
2. 로딩 이미지 적용하기
공통으로 쓰는 페이지는 이름을 common 으로 사용 하고 있습니다.
파일로 따로두지 않고 <head> 에 넣어 사용하셔도 돼요!
// 윈도우가 다 load 되고 나서 id="load" 인 항목을 감춰줍니다.
<script>
$(window).load(function() { $('#load').hide(); });
</script>
// div 는 전체 화면을 반투명하게 보여주는 역할을 합니다.
<div id="load">
<img src="loading.gif" alt="loading">
</div>CSS
#load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: white;
z-index: 99;
text-align: center;
}
#load > img {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}'프론트엔드 > Css' 카테고리의 다른 글
| 색상 조합 참고 자료 (0) | 2021.10.22 |
|---|---|
| 부트스트랩(Bootstrap) 캐러셀(Carousel) 자동 슬라이드 이미지 사용법 (0) | 2021.08.05 |
| Css 레이아웃에서 중요한 display: flex(Flexible Box) 사용법 (0) | 2021.07.30 |
| <picture> 반응형 홈페이지에 배너를 적용할때 필요한 Css 태그 (0) | 2021.07.30 |