Custom progress bars with Rails and Hotwire

The Turbo Rails progress bar is a subtle yet powerful feature that enhances user experience by providing visual feedback during page loads.

By default, it appears as a slim blue bar at the top of the page for requests that take longer than 500ms. However, with a few simple tweaks, you can transform this element to better match your application's design and brand identity.

This tutorial will cover the basics and give you an idea of how to add a completely custom loading experience via Stimulus and Tailwind CSS.

Read the full blog post here:
https://webcrunch.com/posts/custom-progress-bars-rails

Source code for this video:
https://github.com/justalever/custom_turbo_progress

======

👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.

📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1

💻 Read the written version:
https://webcrunch.com/posts/custom-progress-bars-rails

⚡️ New to Hotwire? Enroll in my upcoming course HELLO HOTWIRE:
https://hellorails.io

💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io

💻 The Blog (my source of truth): https://webcrunch.com

Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨‍💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.

Also, this stuff takes a long time to make, but I love to do it. To help me keep at it, consider supporting me. If not monetarily, subscribe to the channel or share it with someone!

✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch

Тэги:

#web-crunch #web_crunch #web_development_tutorial #coding_tutorials #learn_to_code #how_to_code #ruby #rails #tailwind_css #web_design #product_design #software_development #software_as_a_service #saas #css #ruby_on_rails #custom_loading_bar #custom_progress_bar #custom_progress #progress_bar_rails #progress_bar_rails_js #progress_bar_js #progress_bar_javascript #turbo_rails

Скачать видео