Posts Learn Components Snippets Categories Tags Tools About

How to Show Progress Bar Loading Indicator in Inertia JS

Get to know how to show progress bar loading indicator in Inertia JS to show the page loading transition

Created on Jul 14, 2022


In Inertia Js you can make use of the InertiaProgress to show a loading bar indication when processing / navigating between pages. To do this you can first install the package. Use the NPM or YARN to install Inertia JS Progress bar package.
npm install @inertiajs/progress
yarn add @inertiajs/progress

Import the InertiaProgress and init it. It's very straight forward as follows. Do note that this is within the "resources/js/app.js" file.
import { InertiaProgress } from '@inertiajs/progress'


If you do want to change the progress bar color then specify it like the following.
 * Change the color of the inertia progress bar
InertiaProgress.init({ color: "#4B5563" });
I hope this snippets do help you and cheers! Happy coding.

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️