Tạo loading page như youtube cho 1 rails app
This post hasn't been updated for 3 years
Khi mới làm quen với rails, chắc hẳn các bạn sẽ thấy 1 điều khá lạ là khi bạn click vào 1 link để chuyển trang, và nếu việc load data là khá lâu, có thể 2s, 3s hoặc hơn. Tuy nhiên trong thời gian trang kế tiếp chưa load xong, thì bạn vẫn ở trang hiện tại, và chả có action gì để bạn biết là bạn vừa click vào link để load trang khác, hay bạn vừa click hụt
Có khá nhiều cách giải quyết vấn đề này, hôm nay mình xin đưa ra 1 giải pháp đơn giản và khá hiệu quả:
Tạo loading page như youtube với gem "nprogress-rails"
Việc sử dụng gem khá đơn giản
Trong Gemfile
gem 'nprogress-rails'
và chạy bundle
bundle install
trong application.js
//= require nprogress
//= require nprogress-turbolinks
và application.css.scss
*= require nprogress
*= require nprogress-bootstrap
OK, bây giờ web của bạn khi loading sẽ như thế này
Bạn có thể custom lại thanh loading cho phù hợp với nhu cầu của bạn
Thêm đoạn JS để enable hay disable phần loading vòng tròn bên phải
Nếu disable:
NProgress.configure({
showSpinner: false
});
Nếu bạn muốn change style cho thanh loading nằm ngang, bạn override lại css cho "#nprogress .bar"
ví dụ:
#nprogress .bar {
color: red;
background: red;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 50%;
height: 10px;
box-shadow: 0 0 10px #29d, 0 0 5px red;
}
Lúc này thanh loading ngang của bạn sẽ như:
Có vẻ hơi xấu, nhưng muốn chỉ rõ là bạn đã custom được thanh loading ngang. Bạn hãy custom lại cho đẹp theo ý mình nhóe
All Rights Reserved