Customize the Turbo Progress Bar
Tags: rails, ruby, webdev, hotwire
Published: 2024-05-28 09:00:00

This article was originally published on [Rails Designer](https://railsdesigner.com/turbo-progress-bar/)

---

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](https://github.com/hotwired/turbo/blob/9fb05e3ed3ebb15fe7b13f52941f25df425e3d15/src/core/drive/progress_bar.js).

For references these are [the default styles](https://github.com/hotwired/turbo/blob/9fb05e3ed3ebb15fe7b13f52941f25df425e3d15/src/core/drive/progress_bar.js#L8):

```js
.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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcixp0pm3cskzipz4hcr.png)


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


## Rounded corners on the right


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y41fsri8y855gahj2qlr.png)

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


## Glowing blue


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1a63eul3m1tgiod7es4.png)

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


## Fade In


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyvlrjjz6ssjpoqbm1vd.png)

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


## Float off the sides


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0seasu907r5qv4ileq6.png)

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

```css
@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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6cq6tvzyhi2uv8rbio7.png)

```css
@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!

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

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

```js
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.