Как создать панель загрузки стиля Youtube с помощью Rails 4 Turbolinks?

Есть ли способ сделать панель загрузки стиля Youtube (межстраничная страница в верхней панели) с помощью турбо-ссылок.

Turbolinks имеет множество различных обратных вызовов, поэтому вы можете сделать перебор на несколько шагов, но есть ли способ заручиться успехом тоже?

Ответы

Ответ 1

nprogress-rails, вероятно, именно то, что вам нужно.

Ответ 2

Проверьте версию turbolinks:

$ 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;
}

введите описание изображения здесь

Ответ 3

Предполагая, что вы настроили Turbolinks правильно, добавьте nProgress JS script в конвейер ресурсов приложения 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 для получения дополнительной информации.

Ответ 4

Воспитан в https://github.com/rails/turbolinks/issues/265

Не добавляется в Turbolinks, но показывает вам простую ссылку о том, как добавить его, если вам нужно.

Ответ 6

В настоящее время ProgressBar включен в turbolinks (v.2.5.3)