반응형
페이지 로딩중 (스크립트) 만들기 - 이미지 없이 css, jquery, javascript 만으로
로딩중 객체 + 스크롤 락
스크립트 script
// jQuery 불러오기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
window.onload = function(){
$('.loading').css('display','none') //로딩 객체 제거
$('body').removeClass('scrollLock') //스크롤 락 제거
}
</script>
html
<body class="scrollLock"> <!-- 스크롤락 클래스 -->
<div class="loading"> <!-- 로딩영역 -->
<div class="loading__image">
</div>
</div>
</body>css
/* loading */
.loading { position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.6); z-index:100; }
.loading__image { position:absolute; left:50%; top:50%;margin-left:-40px;margin-top:-40px;border: 12px solid #f3f3f3; /* Light grey */ border-top: 12px solid #8a8a8a; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 1s linear infinite; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* scroll lock */
.scrollLock { overflow: hidden}반응형
'blog > Javascript' 카테고리의 다른 글
| 현재 서버시간으로 팝업 (스크립트) 제어 (0) | 2022.03.08 |
|---|---|
| 페이지 전환 스크립트 + 공사중 페이지 (0) | 2021.10.05 |
| 페이지 접속시 모바일 페이지로 이동 (0) | 2021.10.05 |
| 예약시간에 스크립트 실행하기2 (0) | 2021.09.28 |
| 예약시간에 스크립트 실행하기 (0) | 2021.09.27 |
