XE에만 국한된 것이 아닌 모든 웹페이지에서 동작합니다.
간단히 설명드리자면, 웹사이트가 로딩될때 상단에 라인 로딩바가 지나간다고 보시면 됩니다. (페이지 속도와 거의 비례합니다.)
적용방법은 XE 기준으로 설명 드리겠습니다.
우선 저는 페이지 전체에 적용하기 위해서 XE > /common/tpl/common_layout.html 에 적용했습니다. (모바일도 적용하실려면 mobile_layout.html 에 동일한 방법으로 적용하시면 됩니다.
1. 먼저 첨부 파일을 풀고 css 는 XE > common/css 에, js 파일은 common/js 에 업로드 합니다.
(경로는 어디로 하든 상관없지만, 전페이지 공통에 적용할거라 저는 해당 위치에 업로드 했습니다.)
2. common/tpl/common_layout.html 을 여시고 <head>와 </head> 사이 적당한 곳에 아래 소스를 삽입합니다.
<link rel="stylesheet" href="../common/css/nprogress.css">
<script src="../common/js/nprogress.js"></script>
<script>
jQuery(function($){
// NProgress
$('body').show();
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
});
</script>
js와 css경로는 업로드한 위치로 수정해주세요~
3. nprogress.css 을 여시고 #nprogress .bar 를 찾으셔서 background 색상을 원하시는 색상으로 변경해주시면 됩니다. (첨부파일은 블루 색상입니다.)
소스 수정가능한 블로그, 회사 사이트 등에 적용해 보세요.
모바일에서 보면 앱스러움이 느껴집니다. ㅎ
미리보기 : http:/www.webmini.net
원 소스 출처 : http://ricostacruz.com/nprogress/ 입니다.
저희도 적용했습니다. 감사합니다. ㅋ
요새 사이트에 신규글 작성하시는 것 같아 거기에 작성하면 좋을 것 같다고 제안드린건데 여기에 작성해 주셨네요 ㅋ
그리고 사용하시는 레이아웃에 설치하셔도 됩니다.
js,css 모두 각각의 레이아웃에 업로드하구요. 코어 업데이트때 수정하기 귀찮으신 분들은 그냥 레이아웃 마다 설치하세요~
디자인도 다르게 할 수 있으니...