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

2017.05.29 15:20language/javascript

 

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

 

 

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

 

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

 

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


참고링크 <- 링크를 참고하면 progressbar 를 이미지 파일로 만들 수 있다.

 



 

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

 

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

 

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

 

공식 홈페이지

 

 

혹시 몰라서 첨부함 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에 프로그래스바(로딩바) 추가