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.
Top comments (0)