Jak utworzyć pasek ładowania w stylu Youtube za pomocą Turbolinksa Rails 4?

Question

Czy istnieje sposób na utworzenie paska ładowania w stylu Youtube (między stronami na górnym pasku) za pomocą linków turbo.

Turbolinks ma wiele różnych wywołań zwrotnych, dzięki czemu można wykonać skokowy krok w kilku krokach, ale czy istnieje sposób, aby włączyć się do postępu?

Answer 1

nprogress-rails to prawdopodobnie to, czego potrzebujesz.

Answer 2

została wychowana w https://github.com/rails/turbolinks/issues/265

nie zostanie dodany do Turbolinks, ale pokazuje prostą odniesienia dla jak go dodać jeśli trzeba.

Answer 3

Wtyczka jQuery nazywana NG Progress JS wydaje się mieć obsługę linków turbo. Oto alternatywy NG Progress &.

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

nadzieję, że pomoże.

Answer 4

Zakładając, że masz skonfigurowany Turbolinks, dodaj automatycznie nProgress JS script do potoku aktywów aplikacji Rails, tj. JS i CSS.

Konfigurowanie nProgress dodając to do zwyczaju JS ...

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

I to wszystko.

Ps: Sprawdź numer nProgress Github page, aby uzyskać więcej informacji.

Answer 5

Oto kolejny świetny JS z Hubspot, zwany Pace.

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

Answer 6

w dzisiejszych czasach ProgressBar jest dołączony turbolinks (v.2.5.3)

Answer 7

Sprawdź swoją wersję turbolinks:

$ gem list |grep turbolinks 
turbolinks (2.5.3) 

jeśli Turbolinks wersja < 3,0, dodać poniżej kodu ty plik js (na przykład: application.js).

Turbolinks.enableProgressBar(); 

jeśli używasz Turbolinks 3.0, pasek postępu jest domyślnie włączony.

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

pasek postępu może być dostosowywane przez CSS, podobnie jak:

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