안녕하세요 상훈입니다.
Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.
BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.
html
<div id="loader">
<div class="spinner-border text-info position-absolute top-50 start-50" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Css
#loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: rgb(156, 154, 154);
z-index: 99;
text-align: center;
}
#loader>div {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
Javascript
$(window).on('load', function () {
$('#loader').hide();
})- 제이쿼리를 사용할 수 있게 해야합니다.
↓↓ 제이쿼리 cdn 적용하는 법 ↓↓
[ jQuery ] jQuery 제이쿼리 CDN 링크 공유
안녕하세요 상훈입니다. 자바스크립트 - 제이쿼리의 cdn을 공유합니다. 해당 코드 한줄을 내에 넣어줍니다.
code-hoon.tistory.com
↓↓ BootStrap cdn 적용하는 법 ↓↓
[ BootStrap ] 부트스트랩 cdn 적용하는 방법
안녕하세요 상훈입니다. 프론트엔드 부트스트랩 프레임워크를 사용하고 싶을때, cdn으로 class와 id에 대한 javascript, css를 적용하는 방법을 포스팅하겠습니다. 아래의 링크를 복사하여 head 태그 안
code-hoon.tistory.com
이상입니다.
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ Javascript ] [ jQuery ] Ajax - PHP 사용하기 (0) | 2021.10.20 |
|---|---|
| [ JavaScript ] Ajax 기본 틀 (0) | 2021.10.20 |
| [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 (0) | 2021.10.06 |
| [ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제 (0) | 2021.09.09 |
| [ JavaScript ] Split 예제, 자바스크립트 문자열 나누기 (0) | 2021.09.06 |
