안녕하세요. 명월입니다.
이 글은 css로 작성 된 loader 마크에 대한 글입니다.
웹 페이지에서 자바스크립트 처리를 할때 ajax 비동기 처리던가 복잡한 계산등으로 처리 시간이 걸리는 작업을 할 때, 웹 페이지를 잠시 멈추게 하고 로딩 마크가 나오게 해야하는 처리가 필요할 때가 있습니다.
위와 같은 마크입니다. 예전에는 gif파일로 해서 z-index를 가장 높게 설정하고 이미지가 나오게 하는 방법도 있으나 조금이라도 편하게 사용하기 위해 css와 js로만 만들었습니다.
참조 - github 바로가기
CDN 주소
<!-- css 파일 -->
<link rel="stylesheet" href="https://nowonbun.github.io/Loader/loader.css">
<!-- javascript 파일 -->
<script type="text/javascript" src="https://nowonbun.github.io/Loader/loader.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://nowonbun.github.io/Loader/loader.css">
</head>
<body>
<button class="loading-test-btn">click!</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- loader는 jquery를 기반으로 작성하였기 때문에 loader.js파일 보다 상단에 jquery를 선언해 줍니다.-->
<script type="text/javascript" src="https://nowonbun.github.io/Loader/loader.js"></script>
<script>
$(function(){
// 로딩 중에는 리로드를 못하게 막는다.(default는 true이다)
loader.setReload(true);
// 클래스 스타일 추가
loader.setStyle("big color-4");
$(".loading-test-btn").on("click", function(){
// 로딩 후 5초 후에 꺼진다.
loader.on(function(){
setTimeout(function(){
loader.off();
},5000);
});
});
});
</script>
</body>
</html>
사용방법은 먼저 loader.css와 loader.js파일을 선언합니다. 참고로 loader.js는 jquery기반으로 작성되었기 때문에 loader.js위에 jquery를 선언해 주세요.
그리고 setReload는 로딩 페이지가 나올 때 페이지 리로드(새로고침)을 막는 여부입니다. 만약 이 함수를 생략하면 기본 설정으로 리로드가 막힙니다.
그리고 setStyle인데 함수를 생략하면 아래가 기본 화면입니다.
style 클래스로는 big, color-2, color-3, color-4가 있습니다.
big은 loading 마크가 크게 표시 되는 것이고 color-2는 2가지 색상 3는 3가지 4는 4가지 색상이 표시됩니다.
참조 - https://www.w3schools.com/howto/howto_css_loader.asp
예제
제가 간단하게 만든 소스이니 마음대로 수정 또는 배포해도 상관없습니다. 다만, 가능하면 출처만 남겨주세요.
여기까지 css로 작성 된 loader 마크에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법 (0) | 2019.11.01 |
|---|---|
| [Jquery] Sortable(마우스 드래그 앤 드롭으로 리스트 정렬) (0) | 2019.10.24 |
| [Jquery] 다이얼로그 Dialog (0) | 2019.10.23 |
| [Jquery] 달력 라이브러리 Datepicker (0) | 2019.10.21 |
| [Jquery] ajax 함수 사용 방법 (2) | 2019.10.16 |
| [Javascript] window.history (0) | 2019.09.02 |
| [Javascript] Clipboard를 사용하는 방법(Ctrl + c 할때 출처 붙이기) (0) | 2019.08.20 |
| [Jquery] ajax에서 동기화 작업하는 방법 (0) | 2019.07.15 |