jQuery oLoader 손쉽게 로딩(Loading) 표현하기
Ajax 비동기 통신 시 Progress 나 Loading 을 표현해야 하는 경우가 있는데 만들어서 사용하기에는 쫌 많이 귀찮죠?ㅎㅎ
jQuery oLoader 를 사용하시면 아주 간단하게 만족스러운 로딩(Loading) UI 를 구현할 수 있습니다.
jQuery oLoader lib 추가
1 | <script type="text/javascript" src="./js/jquery.oLoader.min.js"></script> |
jQuery oLoader #1 - 부분로딩
1 2 3 4 5 6 7 8 | $('#oLoader').oLoader({ backgroundColor: '#fff', fadeInTime: 500, fadeLevel: 0.8, style: "<div style="position:absolute;left:10px;bottom:10px;background:#000;color:#fff;padding:5px;border-radius:4px">Loading...</div>", imagePadding: 5, imageBgColor: '#fe0',}); |
jQuery oLoader #2 - 전체로딩
1 2 3 4 5 6 7 8 9 10 11 | $('#oLoader').oLoader({ wholeWindow: true, lockOverflow: true, backgroundColor: '#fff', fadeInTime: 500, fadeLevel: 0.8, style: "<div style="position:absolute;left:10px;bottom:10px;background:#000;color:#fff;padding:5px;border-radius:4px">Loading...</div>", imagePadding: 5, imageBgColor: '#fe0', hideAfter: 1500}); |
Example Site
좀 더 자세한 사용방법과 다양한 예제를 확인 하시고 싶으신 분은 아래의 사이트를 방문하세요.
jQuery oLoader Example'Javascript > jQuery' 카테고리의 다른 글
| [Javascript] 특정 영역을 프린트 하는 방법 (0) | 2018.12.03 |
|---|---|
| [jquery-loading] 아주 간단하고 깔끔한 jquery 로딩 플러그인을 소개합니다. (1) | 2017.02.26 |
| [jQuery 함수] has() 특정 element를 자식으로 가지고 있는 dom element 선택하기 (0) | 2015.07.27 |
| [jQuery 함수] $.trim() 문자열 공백 제거하기 (0) | 2015.07.27 |
| [jQuery 함수] clone() dom element 복사하기! (0) | 2015.07.27 |