I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) 제이쿼리 화면 로딩 시 로딩 이미지 띄우기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 6. 7. 17:16

반응형

[즐거'웅'코드] 목차

  1. 리소스
  2. 예제 소스
리소스
images.zip
51.8 kB
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<style>
    #loading {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        display: block;
        opacity: 0.5;
        background: #ffffff;
        z-index: 100;
        text-align: center;
    }
 
    #loading img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 101;
    }
</style>
 
<div id="loading">
    <img src="images/loading.gif" alt="loading">
</div>
 
<script>
    $(window).load(function () {
        $('#loading').hide();
    });
</script>
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 제이쿼리 form문 동적 생성 및 submit 하기  (0) 2021.06.09
(즐거웅코드) 자바스크립트 form문 동적 생성 및 submit 하기  (0) 2021.06.08
(즐거웅코드) svg로 중간에 마스크 씌워진 삼각형 그리기  (0) 2021.06.06
(즐거웅코드) svg로 삼각형 그리기  (0) 2021.06.05
(즐거웅코드) CSS 화살이 날아가 꽂히는 느낌의 '자세히 보기' 버튼 만들기  (0) 2021.06.03

관련글

댓글 0

티스토리툴바