Custom Indikator Progress Turbolinks di Rails Menggunakan NProgress
Web Developer | Blogger | Creator of RubyPedia.com
20 Maret 2018

Rails versi terbaru secara bawaan sudah menambahkan Turbolinks saat pertama kali install. Denagan Turbolinks diaktifkan di aplikasi, maka aplikasi kita akan terasa mulus dan cepat, tidak ada refresh sebuah halaman web.

Terkedang Turbolinks mengalami permintaan halaman yang membutuhkan waktu lebih lama, dan terkadang seseorang menganggap aplikasi macet atau tidak berjalan.

Sekarang dengan menggunakan NProgress aplikasi kita akan ditambahkan loader dan progressbar yang membuat aplikasi kita terlihat tidak macet atau tidak berjalan.

NProgress sebuah progress indikator seperti Youtube, dll.

Installation

Pertama tambahkan nprogress-rails di Gemfile:

gem "nprogress-rails"

Kemudian jalankan:

bundle install

Oke, Sekarang NProgress sudah terinstall di aplikasi kita,sekarang kita tambahkan JavaScript NProgress kita di app/assets/javascripts/application.js


BACA JUGA : Menjalankan Ruby On Rails Pada Windows Menggunakan Vagrant


//= require nprogress
//= require nprogress-turbolinks

Selanjutnya tambahkan style untuk NProgressnya di app/assets/stylesheets/application.scss

$nprogress-color: #37c8c9;

@import "nprogress";
@import "nprogress-bootstrap";

Note : untuk merubah style color atau warna NProgressnya teman-teman bisa merubah dibagian kode $nprogress-color: #37c8c9;

Sekarang coba teman-teman jalankan atau restart aplikasinya, maka akan melihat perbedaanya

Blog ini telah dibaca sebanyak 464 kali
Ruby Rails Ruby on Rails NProgress JavaScript Loader Indicator

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Web Developer | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus