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/ 입니다.

Atachment
첨부
TAG •
  • profile

    저희도 적용했습니다. 감사합니다. ㅋ
    요새 사이트에 신규글 작성하시는 것 같아 거기에 작성하면 좋을 것 같다고 제안드린건데 여기에 작성해 주셨네요 ㅋ

     

    그리고 사용하시는 레이아웃에 설치하셔도 됩니다. 

     js,css 모두 각각의 레이아웃에 업로드하구요. 코어 업데이트때 수정하기 귀찮으신 분들은 그냥 레이아웃 마다 설치하세요~

    디자인도 다르게 할 수 있으니...

  • profile profile

    좀더 응용을 하신다면 mid로 각 메뉴마다 색상을 다르게 할수도 있답니다.^^ (개인 취향에 맞게..)

  • profile profile
    네. 저희는 PC,모바일 다르게 했고

    모바일의 경우는 웹뷰의 경우 앱에서 나오는 색상이 또 달라서 거기에 또 맞춤으로 했습니다.
  • profile
    보통 애드온으로구현하죠.. 잘찾아보면 다른분께서 만드신애드온이 있던가.. 제꺼이던가 있더라고요
  • profile profile

    네 XE경우 애드온으로 제작하는게 효율적이겠네요.
    다른곳에 적용할때 참고 하시면 될듯해요~

  • profile profile
    파일은 업로드하고 소스는 파일 로드하는 소스 그리고 스크립트 몇줄이라 애드온보다 직접 소스를 적용하는 것도 나쁘지 않습니다~~ 애드온을 호출할 필요도 없죠.
  • profile profile
    mid나 여러가지 소스 스크립트 넣고 뭐 처리하는데에는 애드온만한게 없습니다.ㅋㅋ

    그리고 애드온은 어차피 호출되어야 하고 열리는 시점이 있기 때문에 Context 내에 있는 Header에 소스코드 넣어주도록 설계만 잘하면 일반적으로 직접 Common.html 에서 넣은 것보다 훨씬깔끔하고 유지보수면에서도 또 한번 수정된 코드를 더 채크해야할 사항이 있는지 없는지 검사하는 단계도 적습니다..ㅎㅎ

    물론 선택적인 면에서 사용하시는 것이지만 제 의견은 이렇습니다.
  • ?
    흥미롭내요 ...
  • profile
    웁스 페이지 로딩이 너무 빠르면 안보이네요
  • profile profile
    무조건 출력은 되어야 할텐데요 ?
  • profile profile

    네 사용자에게 페이지 '로딩중'을 알리는거라, 로딩이 빠르면 안보이는게 맞습니다. ㅎ

    만약에 아예 안보이면 적용이 제대로 안된거일수도 있습니다.

  • profile
    와 좋네요. 이용자 입장에서도 좋은 팁인 것 같습니다. 추천 누르고 갑니다~
  • profile
    이팁 적용을 위한 애드온을 무료로 배포합니다.

    https://xetown.com/rxe_point/1070724
  • profile profile
    굿입니다~ ^^
  • profile
    좋기는 한데, 페이지가 어느 정도 로딩된 다음에 프로그레스바가 작동하는 것 같네요.
    한 타임 늦게 시작한다고 해야 하나.. 메인 프레임은 무시(?)하고 콘텐츠 불러올 때 작동하는 듯 합니다..

    페이지 처음 뜰 때부터 프로그레스바가 활성화된다면 더욱 좋을 것 같은데 코알못이니.. 뭐가 어떻게 작동하는지 알 수가 없네요. ㅜ.ㅡ
  • profile profile
    처음 로딩 할때는 원래 브라우저에서 뜨는게 뜨구요. 페이지가 로딩 준비가 된 상태에서 작동시작해서 프로그레스바가 떳다가 사라지는 시점에는 컨텐츠가 모두 로딩 된 것으로 보시면 됩니다.

    이걸 보고 있으면 이런 느낌입니다. 완전히 로딩 끝났군~ 급한 성격의 사람들에게 신호를 주는 느낌도 줍니다.
  • profile profile

    모바일의 경우 브라우저에서 로딩 시작할때 동작하는 거랑 색상을 맞춰보세요. 구분된 동작이 지만 연속성이 있어 보기 좋습니다.

    로딩시작시 뜨는건 레이아웃 css에서 처리하는지 사이트 마다 색상이 다 다르네요.

    PC에서는 로딩시작할때는 안뜨나보네요.