Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I follow docs, but doesnt work for me?
import { InertiaProgress } from '@inertiajs/progress'
InertiaProgress.init()
Unless you have the css yourself, be sure to ask it to be included
InertiaProgress.init({
// The delay after which the progress bar will
// appear during navigation, in milliseconds.
delay: 250,
// The color of the progress bar.
color: '#29d',
// Whether to include the default NProgress styles.
includeCSS: true, //this
// Whether the NProgress spinner will be shown.
showSpinner: false,
})
@Sinnbeck I installed Tailwind 3, doesnt work
@Ajvanho this isn't tailwind. It's nprogress
Did you remember to recompile with npm?
Otherwise you can try adding the css in your blade file
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
@Sinnbeck I dont know why, but doesnt work...
@Ajvanho can you show the link that should trigger it (it isn't active on initial page load)
<Link href="/settings">Settings</Link>
Do I have to have some shared component or?
@Ajvanho ok. Open dev tools and select elements. Then click the link and see if a new div is appended to the div
Also try setting the delay to a really low number to make sure it triggers
And of course npm run dev
@Sinnbeck devtool doesnt work too
@Ajvanho what do you mean? F12 doesn't open dev tools? Or you don't see it trigger?
Maybe download pingcrm and see how that is set up compared to yours
@Sinnbeck i try to click vue devtool -> vue.js dont detected
@Ajvanho I meant the elements tab with html elements. First tab
@Sinnbeck there is event inertia:progress
@Ajvanho I recommend downloading the ping crm demo app and see how it works there https://github.com/inertiajs/pingcrm
Hey man, go into your vite.config.js and add
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
Or
250 ms is a stupid example. Put it to something very large.
InertiaProgress.init({
// The delay after which the progress bar will
// appear during navigation, in milliseconds.
delay: 1000,
// The color of the progress bar.
color: '#29d',
// Whether to include the default NProgress styles.
includeCSS: true,
// Whether the NProgress spinner will be shown.
showSpinner: false,
})
and if not anything try
Route::get('/users', function () {
sleep(10);
return inertia('Users');
});
npm install @inertiajs/progress
Please or to participate in this conversation.