Customize the Turbo Progress Bar

This article was originally published on Rails Designer

---

For Turbo-powered request that take longer than 500ms, Turbo will automatically display a progress bar.

It simply is a <div> element with a class name of turbo-progress-bar. You can explore how this element functions and see it's default styles here.

For references these are the default styles:

.turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: #0076ff; /* Cyan blue 🎨 */
  z-index: 2147483647; /* The maximum positive value for a 32-bit signed binary integer 🤓 */
  transition:
    width ${ProgressBar.animationDuration}ms ease-out,
    opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;
  transform: translate3d(0, 0, 0);
}

These styles are applied first in the document, which means you can easily override them with your own CSS.

I like to use even this minute element to elevate my brand's awareness. It doesn't need to be much, it can simply be a change of the background color. Let's give some example for inspiration.

These examples use Tailwind CSS' @apply.

Change the background color

@layer components {
  .turbo-progress-bar {
    @apply bg-blue-500;
  }
}

Rounded corners on the right

@layer components {
  .turbo-progress-bar {
    @bg-blue-500 rounded-r-full;
  }
}

Glowing blue

@layer components {
  .turbo-progress-bar {
    @apply bg-blue-500 shadow shadow-[0_0_10px_rgba(59,130,246,0.72)];
  }
}

Fade In

@layer components {
  .turbo-progress-bar {
    @apply bg-gradient-to-r from-transparent to-sky-500;
  }
}

Float off the sides

It's a bit hard to see in this example—so add it to your app!

@layer components {
  .turbo-progress-bar {
    @apply bg-black rounded-full top-4 left-4 right-4 ring-2 ring-offset-0 ring-white;
  }
}

Colorful gradient

@layer components {
  .turbo-progress-bar {
    @apply bg-gradient-to-r from-indigo-500 via-purple-400 to-pink-500;
  }
}

More tips

Don't want to show the progress bar at all? Just hide it!

.turbo-progress-bar {
  visibility: hidden;
}

Want to change when the progress bar appears (other than after the default 500ms)?

Turbo.setProgressBarDelay(delayInMilliseconds)

It's easy to overlook these UI components when building your app, but with the examples given above, it's now really trivial to tweak them to match your brand.