https://github.com/justalever/custom_turbo_progress

Custom loading bars with Rails and Hotwire
https://github.com/justalever/custom_turbo_progress

hotwire-rails hotwire-stimulus hotwire-turbo rails stimulus turbo

Last synced: 26 days ago
JSON representation

Custom loading bars with Rails and Hotwire

• Host: GitHub
• URL: https://github.com/justalever/custom_turbo_progress
• Owner: justalever
• Created: 2024-08-13T18:33:04.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-14T11:54:41.000Z (6 months ago)
• Last Synced: 2025-01-03T09:52:51.665Z (30 days ago)
• Topics: hotwire-rails, hotwire-stimulus, hotwire-turbo, rails, stimulus, turbo
• Language: Ruby
• Homepage: https://webcrunch.com/posts/custom-loading-bars-rails
• Size: 51.8 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

![loading-bars-rails](https://github.com/user-attachments/assets/48a75100-b7aa-4a10-92c2-9dbe2edb6b9c)

# Custom progress bars with Rails

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 better to 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 blog post](https://webcrunch.com/posts/custom-loading-bars-rails)

- [Watch the video tutorial](https://youtu.be/-jsba52ywSc)

Follow:

- [X](https://x.com/webcrunchblog)

- [YouTube](https://www.youtube.com/user/webcrunch?sub_confirmation=1)

Learn:

- [webcrunch.com](https://webcrunch.com)

- [hellorails.io](https:://hellorails.io)

- [hellohotwire.com](https://hellohotwire.com)