[Jquery] CSS로 작성 된 loader 마크


안녕하세요. 명월입니다.


이 글은 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 마크에 대한 설명이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.