Rails 7 fresh apps ships with
Turbo to speed up your application while dramatically reducing the amount of JavaScript that you will need to write.
Turbo lets your server deliver HTML directly as an alternative to the prevailing front-end frameworks that reduce the server side of your Rails application to little more than a JSON API.
Turbo has our back and has a built-in replacement for the browser's default progress bar, and we can style it to meet our application's design system!
set this style:
// app/assets/stylesheets/components/_turbo_progress_bar.scss
.turbo-progress-bar {
background: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
}
// app/assets/stylesheets/application.sass.scss
// All the previous code
@import "components/turbo_progress_bar";
debug step:
# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
# Add this line to see the progress bar long enough
# and remove it when it has the expected styles
before_action -> { sleep 1 } # this is only to debug the progress bar, it can be removed.