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:
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
.turbo-progress-bar {
@apply bg-blue-500;
}
}
Rounded corners on the right
.turbo-progress-bar {
@bg-blue-500 rounded-r-full;
}
}
Glowing blue
.turbo-progress-bar {
@apply bg-blue-500 shadow shadow-[0_0_10px_rgba(59,130,246,0.72)];
}
}
Fade In
.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!
.turbo-progress-bar {
@apply bg-black rounded-full top-4 left-4 right-4 ring-2 ring-offset-0 ring-white;
}
}
Colorful gradient
.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!
visibility: hidden;
}
Want to change when the progress bar appears (other than after the default 500ms)?
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.
