정보&지식 공유

무료 로딩이미지(gif) 만들어주는 사이트

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 337회 작성일 21-06-26 17:57

본문

안녕하세요.

오늘 알아볼 사이트는 홈페이지 만드는 분들에게 유용한 정보 입니다.


사이트 접속시 빙글빙글 돌아가는 gif 이미지, loading gif 이미지 아시나요? 

그것을 쉽고 빠르게 웹에서 만들어 주는 사이트 입니다.


http://ajaxload.info/


68e82c7e59081361c90d8af15dcead38_1624697315_6333.jpg
 



무료 로딩이미지(loading gif) 만들기


1. 만들 이미지 선택/설정하기

윗부분 설정에서 indicator type을 클릭하면 다양한 형태의 로딩이미지를 선택 할 수 있습니다.

68e82c7e59081361c90d8af15dcead38_1624697404_7004.jpg
 


2. 만들기(Generate it) 클릭


3. 미리보기로 확인하기


4. 다운로드 받기

68e82c7e59081361c90d8af15dcead38_1624697548_0456.jpg
 



5. 사이트에 적용하기

위에서 만든 로딩 이미지를 사이트에 적용하는 방법을 알아보겠습니다.

아래 소스를 넣으면 사이트 접속시 접속 완료 될때까지 이미지를 보여 줍니다.


1) CSS

<style> #loading { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; display: block; opacity: 0.7; background-color: #fff; z-index: 99; text-align: center; } #loading-image { position: absolute; top: 50%; left: 50%; z-index: 100; } </style>


2) 자바스크립트

<script type="text/javascript"> $(window).load(function() { $('#loading').hide(); }); </script>


3) HTML

<div id="loading"><img id="loading-image" src="/images/loading.gif" alt="Loading..." /></div> 

댓글목록

등록된 댓글이 없습니다.

Total 32건 1 페이지

검색


© 2021 단축 URL 서비스 | urly.kr