Written by java-style
on 2021-10-06

[ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩...

반응형

안녕하세요 상훈입니다.

Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.

BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.

이미지를 클릭하시면 부트스트랩으로 이동합니다.

html

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 적용하는 법 ↓↓

↓↓ BootStrap cdn 적용하는 법 ↓↓

이상입니다.

반응형

from http://code-hoon.tistory.com/74 by ccl(A) rewrite - 2021-10-06 12:27:54

Top