Rails 4의 Turbolinks로 유튜브 스타일의 로딩바를 만드는 방법은?

Rails 4의 Turbolinks로 유튜브 스타일의 로딩바를 만드는 방법은?

터보링크로 유튜브 스타일 로딩바(맨 위 바를 가로지르는 인터페이지)를 만드는 방법이 있나요?

터보링크스에는 다양한 콜백이 많이 있어서 몇 단계에 걸쳐 비약적인 콜백을 만들 수 있지만 진행 상황에 연결할 수 있는 방법도 있습니까?

nprogress-required는 아마도 당신이 필요로 하는 것일 것입니다.

터보링크 버전을 확인합니다.

$ gem list |grep turbolinks
turbolinks (2.5.3)

Turbolinks 버전 < 3.0인 경우 아래 코드를 js 파일에 추가합니다(예:application.js).

Turbolinks.enableProgressBar();

Turbolinks 3.0을 사용하는 경우 진행 표시줄이 기본적으로 켜져 있습니다.

https://github.com/rails/turbolinks#progress-bar .

프로그레스 바는 다음과 같이 CSS에 의해 사용자 정의될 수 있습니다.

html.turbolinks-progress-bar::before {
  background-color: red !important;
  height: 5px !important;
}

Turbolinks가 올바르게 설정되었다고 가정할 때, Rails 앱 자산 파이프라인, 즉 JS 및 CSS에 nProgress JS 스크립트를 추가합니다.

사용자 지정 JS에 추가하여 nProgress 설정...

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

그리고 이것이 마지막입니다.

Ps: 자세한 내용은 nProgress Github 페이지를 확인해보세요.

https://github.com/rails/turbolinks/issues/265 에서 자랐습니다.

Turbolinks에는 추가되지 않지만, 필요한 경우 추가하는 방법에 대한 간단한 참조를 보여줍니다.

여기 Hubspot의 또 다른 훌륭한 JS, Pace가 있습니다.

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

현재 Progress Bar는 터보링크와 함께 포함되어 있습니다(v.2.5.3).

NG Progress JS라는 jQuery 플러그인이 터보 링크를 지원하는 것 같습니다.다음은 NG Progress & Alternative입니다.

http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html

도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/18321131/how-to-create-a-youtube-style-loading-bar-with-rails-4s-turbolinks