Есть ли способ сделать панель загрузки в стиле Youtube (межстраничный через верхнюю панель) с турбо-ссылками.
Turbolinks имеет множество различных обратных вызовов, так что вы можете сделать рывок через несколько шагов, но есть ли способ также зацепиться за прогресс?
nprogress-rails, вероятно, именно то, что вам нужно.
Проверьте версию турболинков:
$ 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, добавьте скрипт nProgress JS в конвейер ресурсов вашего приложения Rails, то есть JS и CSS.
Настройте nProgress, добавив это в свой собственный JS...
$(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, но покажет вам простую справку о том, как добавить его, если вам нужно.
Вот еще один блестящий JS от Hubspot под названием Pace.
http://github.hubspot.com/pace/docs/welcome/
В настоящее время ProgressBar включен в турболинки (v.2.5.3)
Плагин jQuery под названием NG Progress JS, похоже, поддерживает турбо-ссылки. Вот NG Progress и альтернативы.
http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html
Надеюсь, поможет.
