2017. 5. 29. 15:20ㆍlanguage/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에 프로그래스바(로딩바) 추가
'language > javascript' 카테고리의 다른 글
| javascript 배열 중복 제거 (0) | 2018.04.10 |
|---|---|
| javascript getyear 117 118 / getyear 쓰지말고 getFullYear 쓰자 (6) | 2018.01.10 |
| spin.js 에 알림말 text 넣기 / 로딩바 (0) | 2017.08.22 |
| javascript onbeforeunload 오작동 / 버그 (0) | 2017.06.29 |
| javascript encoding url / url encode decode 하기 / javascript 한글 깨짐 (0) | 2017.06.28 |
| html2canvas 적용 시 table border 안나오는 문제 (4) | 2017.03.13 |
| JSP 페이지 이미지로 저장, 웹페이지 이미지로 저장, 페이지 이미지 캡쳐 (12) | 2017.03.13 |
| javascript showModalDialog 에서 window.open 시 session 이슈 (0) | 2017.01.05 |
| javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지 (16) | 2016.12.09 |
| dwr 에서 request, session 사용하기 / WebContextFactory is deprecated (0) | 2016.12.08 |