choco5958
지마의 개발일기
choco5958
전체 방문자
오늘
어제
  • 전체보기 (46)
    • 개발 (34)
      • Java (0)
      • JavaScript (7)
      • Php (4)
      • Ios(Swift) (23)
    • 프론트엔드 (7)
      • Html (1)
      • Css (5)
    • 백엔드 (0)
      • Mysql (0)
      • Oracle (0)
      • MongoDB (0)
    • 서버 (2)
      • Linux (2)
    • 일상 (3)
      • 반려동물 (1)
      • 베이킹 (2)
      • 맛집 (0)

블로그 메뉴

  • 홈

공지사항

인기 글

태그

  • ios#swift#스위프트#아이폰#애플#상속
  • ios#swift#스위프트#프로퍼티#애플#아이폰
  • ios#swift#스위프트#아이폰#애플#함수
  • ios#swift#스위프트#아이폰#애플#옵셔널체이닝
  • ios#swifth#스위프트#열거형#아이폰#애플
  • ios#swift#스위프트#아이폰#애플#타입캐스팅
  • ios#swift#스위프트#아이폰#클래스#애플
  • php#500error
  • swift#ios#스위프트#애플#아이폰#init#초기화구문
  • ios#swift#스위프트#아이폰#애플#프로토콜
  • ios#swift#스위프트#애플#아이폰#고차함수
  • ios#swift#스위프트#구조체#문법#애플#아이폰
  • ios#swift#스위프트#애플#아이폰
  • ios#swift#스위프트#애플#아이폰#try-catch#오류처리
  • ios#swift#스위프트#클로저#애플#아이폰
  • 자바스크립트#javascript#js#개발#웹개발
  • ios#swift#스위프트#조건문#아이폰#애플
  • ios#swift#스위프트#애플#아이폰#assert#guard
  • php#linux#soap#리눅스
  • ios#swift스위프트#애플#아이폰#클래스#구조체

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
choco5958
프론트엔드/Css

웹 페이지 로딩 시 로딩 이미지 보여주기

프론트엔드/Css

웹 페이지 로딩 시 로딩 이미지 보여주기

2021. 8. 6. 17:21

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
  • 1. 로딩 이미지
  •  
  • 2. 로딩 이미지 적용하기
'프론트엔드/Css' 카테고리의 다른 글
  • 색상 조합 참고 자료
  • 부트스트랩(Bootstrap) 캐러셀(Carousel) 자동 슬라이드 이미지 사용법
  • Css 레이아웃에서 중요한 display: flex(Flexible Box) 사용법
  • <picture> 반응형 홈페이지에 배너를 적용할때 필요한 Css 태그
choco5958
choco5958
안녕하세요. 개발 및 일상 팁 들을 포스팅하는 블로그입니다.

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.