css javascript 82 lines · 3 tabs

Customize Turbo progress bar styling with Tailwind/CSS

Shared by codesnips Jan 2026

3 tabs

.turbo-progress-bar {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--progress-start, #6366f1),
    var(--progress-end, #ec4899)
  );
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
  transition: width 300ms ease-out;
  overflow: hidden;
}

.turbo-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar::after {
    animation: none;
  }
}

@media (prefers-color-scheme: dark) {
  .turbo-progress-bar {
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.7);
  }
}

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./turbo_progress.css";

:root {
  --progress-start: theme("colors.indigo.500");
  --progress-end: theme("colors.pink.500");
}

.theme-emerald {
  --progress-start: theme("colors.emerald.400");
  --progress-end: theme("colors.teal.500");
}

import * as Turbo from "@hotwired/turbo";

Turbo.setProgressBarDelay(120);

document.addEventListener("turbo:before-visit", (event) => {
  const url = new URL(event.detail.url, window.location.origin);
  const html = document.documentElement;

  html.classList.remove("theme-emerald");

  if (url.pathname.startsWith("/reports")) {
    html.classList.add("theme-emerald");
  }
});

document.addEventListener("turbo:load", () => {
  const bar = document.querySelector(".turbo-progress-bar");
  if (bar) {
    bar.setAttribute("role", "progressbar");
    bar.setAttribute("aria-label", "Page loading");
  }
});

3 files · css, javascript Explain with highlit

Turbo (part of Hotwire) shows a thin loading bar at the top of the viewport whenever a navigation takes longer than a configurable delay. By default it is a plain blue line owned by the element .turbo-progress-bar, and its width is driven inline by Turbo as the request progresses. Because Turbo controls the width via an inline style attribute, any custom CSS must style the bar's appearance without fighting for the width property — that constraint shapes the whole approach.

In turbo_progress.css, the selector .turbo-progress-bar is overridden with a taller height, a linear-gradient background, and a box-shadow that reads as a glow. Crucially the transition is scoped to width only, so Turbo's incremental width updates animate smoothly while the color and shimmer are left alone. A second layer uses a ::after pseudo-element with its own shimmer keyframe animation to sweep a translucent highlight across the bar, giving the sense of active work. A prefers-reduced-motion media query disables the sweep for accessibility, and a prefers-color-scheme block tunes the gradient for dark backgrounds.

In application.css, the stylesheet is pulled into the bundle and CSS custom properties (--progress-start, --progress-end) are declared on :root, letting the gradient be re-themed from one place or overridden per page. This keeps the visual identity centralized rather than hard-coded inside the bar rule.

Because Turbo only reveals the bar after progressBarDelay milliseconds, the perceived behavior depends on that threshold. In turbo_config.js, Turbo.setProgressBarDelay lowers the delay so the styled bar is actually seen on typical navigations, and the module also demonstrates adding a class hook so page-specific themes can be toggled. The trade-off of a shorter delay is that very fast responses may flash the bar briefly; tuning the value balances feedback against visual noise. This pattern is reached for when an app wants navigation feedback that matches its brand without replacing Turbo's built-in mechanics or writing a custom loading indicator.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

Customize Turbo progress bar styling with Tailwind/CSS — share card

Link copied