javascript 프로그레스바 / 로딩바 플러그인

 

 

페이지 이동 시 둥근 프로그레스바(로딩바)를 구현해달라고 한다.

 

그래서 적당한 플러그인을 찾아보았다.

 

플러그인 말고 특정 이미지를 활용하여 보여줬다 숨겼다 하는 방법도 있다.

 

http://cofs.tistory.com/118 <- 링크를 참고하면 progressbar 를 이미지 파일로 만들 수 있다.

 



 

이 포스팅에서는 플러그인을 활용하여 둥근 프로그레스바(로딩바) 를 구현한다.

 

따라서 이미지파일은 필요없다.

 

내가 찾은 플러그인은 spin.js 라는 녀석이다.

 

공식 홈페이지 ( http://spin.js.org/ )

 

 

혹시 몰라서 첨부함 spin.js 2.3.2버전

spin.js

 

 

플러그인을 선택하는데 있어서 중요하게 생각하는 것들이 있다.

 

라이센스, 지원브라우저, 쉽게 사용가능한지 등...

 

라이센스는 MIT이다.

 

지원 브라우저는 다음과 같다.

Chrome
Safari 3.2+
Firefox 3.5+
IE 6,7,8,9,10,11
Opera 10.6+
Mobile Safari (iOS 3.1+)
Android 2.3+

 

공식 홈페이지에 기재되어있으니 굳이 테스트는 안해보고 믿고 사용했다.

 

필자의 개발환경은 IE 11이다.

 

사용방법은 뭐 설명할것도 없을 정도로 심플하다.

 

일단 가장 마음에 드는 것은 공식 홈페이지에 들어가면 내가 원하는 대로 설정해서 미리 확인할 수 있다.

 

 

위와 같이 크기, 너비, 각도, 색상 등 다양한 설정을 웹에서 미리 해 볼 수 있다.

 

옵션을 잘 활용하면 다양한 모양으로 변형이 가능하다.

 

설정을 해 본 후 다운받아서 js 파일의 defaults 설정값을 수정한다.

 



사용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="./spin.js"></script>
    <script>
        var spinner;
        jQuery(function(){
            spinner = new Spinner().spin().el;
            jQuery(document.body).append(spinner);
        });
   </script>
 </HEAD>
 
 <BODY>
  
 </BODY>
</HTML>
cs

5# : jquery import

6# : spin.js import

8# : 프로그래스바(로딩바) 객체 변수

9# : jquery ready 함수

10# : 프로그래스바(로딩바) 생성

11# : body에 프로그래스바(로딩바) 추가

 

 

 

 

by 개발자 CofS 2017.05.29 15:20