[ajax loading bar]PACE.JS 로딩 바 적용

https://github.hubspot.com/pace/docs/welcome/

페이지로딩 시나 ajax 연결 시 로딩바 처리를 원해서 찾아본 결과

제일 많이 쓰는 스크립트라 적용 해봄

적용 방법도 간단.. git에서 파일 다운받아서 보면 여러가지 테마 및 컬러가 있고 그중에서 원하는걸로 선택하면 됨.

<script>

paceOptions = {

    "ajax": true, // disabled

    "document": false,

    "startOnPageLoad": false

};

</script>

<script src="/js/pace.min.js"></script>

<link href="/css/pace-theme-loading-bar.css" rel="stylesheet" />

$(document).ajaxStart(function() { Pace.restart(); });

css파일을 직접 수정하면 로딩바 사이즈나 색상 등 대부분 변경이 가능함.

위 설정은 문서로딩 시나 페이지 로딩때는 보여지지 않고 ajax 통신때만 보여지도록 해논부분~~

레이어 작업하면서 z-index를 너무 높게 잡아두면 화면상에 안보임.. css파일에 z-index가 2000으로 설정되어있음

끝~