CINXE.COM

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <script src="https://www.googletagmanager.com/gtag/js?id=UA-140425344-1" async></script> <link rel="preload" as="style" href="https://inertiajs.com/build/assets/app-d7e0265e.css" /><link rel="modulepreload" href="https://inertiajs.com/build/assets/app-33726d8e.js" /><link rel="stylesheet" href="https://inertiajs.com/build/assets/app-d7e0265e.css" /><script type="module" src="https://inertiajs.com/build/assets/app-33726d8e.js"></script> <title inertia>Progress indicators - Inertia.js</title> </head> <body> <div id="app" data-page="{"component":"progress-indicators","props":{"errors":{}},"url":"/progress-indicators","version":"98a0dd0764a4bd0df6c50c60d320c18d"}"><div class="font-sans leading-none text-gray-800 antialiased"><div class="text-white" style="background:linear-gradient(to right, #9553e9, #6d74ed)"><div class="relative mx-auto max-w-6xl px-6 md:px-12 xl:px-0"><div class="absolute top-0 left-0 h-full w-full overflow-hidden"><svg class="w-auto" style="height:600px;fill:#b2b6ff;opacity:.08" viewBox="0 0 95 52.8"><path d="M27.3 0H0l26.4 26.4L0 52.8h27.3l26.4-26.4z"></path><path d="M68.6 0H41.3l26.4 26.4-26.4 26.4h27.3L95 26.4z"></path></svg></div><header class="relative flex items-center justify-between py-12"><a class="md:flex md:items-end" href="/"><svg class="block fill-current text-white" style="height:25px" viewBox="0 0 275.3 50.5"><path d="M231.2 16.1h-17.8l17.2 17.2-17.2 17.2h17.8l17.2-17.2z"></path><path d="M258.1 16.1h-17.8l17.2 17.2-17.2 17.2h17.8l17.2-17.2z"></path><path d="M6 15.3h10.3l-6 34.2H0l6-34.2zm.6-9.1C7.2 2.9 10.3 0 13.7 0s5.7 2.8 5.2 6.2c-.5 3.4-3.7 6.2-7.2 6.2s-5.6-3-5.1-6.2zM54.3 28.5l-3.7 21H40.4L43.8 30c.8-4.4-1.6-6.2-4.9-6.2-3.4 0-6.5 2-7.5 6.6L28 49.5H17.8l6-34.2h10.3l-.5 3.2c2.3-2.6 6.2-4.2 10.1-4.2 6.9.1 12.2 5.1 10.6 14.2zM94.5 32.4c-.1.8-.5 2.7-1.1 4.1H68.9c.6 3.8 3.8 4.8 7 4.8 2.9 0 5.2-.8 7.2-2.7l7.2 5.9c-4 4-8.7 6-15 6-11.8 0-18-8.5-16.3-18.7a20.7 20.7 0 0 1 20.5-17.4c9.8 0 16.9 7.6 15 18zm-9.7-3.7c-.3-3.8-3-5.3-6.2-5.3a8.9 8.9 0 0 0-8.3 5.3h14.5zM123.9 14.6l-2 11.6c-4-.6-10.5.8-11.7 7.8l.1-.4-2.8 15.9H97.3l6-34.2h10.3l-1.1 6.2c2.1-4.7 6.6-6.9 11.4-6.9zM137.8 37.3c-.5 3.1 2 3.3 6.6 2.9l-1.6 9.3c-12.3 1.4-16.9-2.7-15.2-12.2l2.1-12.1h-5.5l1.8-9.9h5.4l1.2-6.5 10.8-3.1-1.7 9.6h7.1l-1.8 9.9h-7l-2.2 12.1zM155.3 15.3h10.3l-6 34.2h-10.3l6-34.2zm.6-9.1c.5-3.3 3.7-6.2 7.1-6.2s5.7 2.8 5.2 6.2c-.5 3.4-3.7 6.2-7.2 6.2s-5.7-3-5.1-6.2zM208.1 15.3l-6 34.2h-10.3l.4-2.3a15.5 15.5 0 0 1-10.3 3.3c-11.1 0-15.3-9.6-13.5-18.9 1.6-8.8 8.6-17.2 19.2-17.2 4.5 0 7.7 1.8 9.6 4.6l.6-3.6h10.3zm-13.2 17.2c.9-5.2-1.9-8.4-6.6-8.4a9.5 9.5 0 0 0-9.5 8.3c-.9 5.1 1.8 8.3 6.6 8.3 4.6.1 8.6-3.1 9.5-8.2z"></path></svg><svg class="mt-2 block fill-current text-white md:mt-0 md:ml-4" style="height:8px" viewBox="0 0 328.3 16"><path d="M11.1 2.2H6.6v13.5h-2V2.2H0V.3h11.1v1.9zM29.1.3v15.4h-2V8.8h-7.5v6.9h-2V.3h2v6.5h7.5V.3h2zM46 13.8v1.9h-9.2V.3h9.1v1.9h-7V7h6.5v1.9h-6.5v4.9H46zM77.2 15.7h-2v-12l-5 8.4h-.3l-5-8.4v12h-2V.3h2.3L70 8.4 74.9.3h2.3v15.4zM84 8a8 8 0 0 1 8-8c4.5 0 8 3.5 8 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8zm13.9 0c0-3.4-2.6-6-5.9-6a5.8 5.8 0 0 0-5.9 6c0 3.4 2.6 6 5.9 6 3.4 0 5.9-2.6 5.9-6zM120.2 8c0 4.3-3.1 7.7-7.3 7.7h-6V.3h6c4.2 0 7.3 3.4 7.3 7.7zm-2 0c0-3.3-2.2-5.8-5.3-5.8h-4v11.5h4c3.1.1 5.3-2.5 5.3-5.7zM136.2 13.8v1.9H127V.3h9.1v1.9h-7V7h6.5v1.9h-6.5v4.9h7.1zM148.8 9.8h-3.6v5.9h-2V.3h6.2c2.6 0 4.8 2.1 4.8 4.8 0 2-1.3 3.8-3.2 4.5l3.6 6.2h-2.3l-3.5-6zm-3.6-1.9h4.1c1.5 0 2.8-1.3 2.8-2.9 0-1.6-1.2-2.9-2.8-2.9h-4.1v5.8zM172.6.3v15.4H171l-8-11.5v11.5h-2V.3h1.7l7.9 11.5V.3h2zM204.6 15.7h-2v-12l-5 8.4h-.3l-5-8.4v12h-2V.3h2.3l4.9 8.1 4.9-8.1h2.3v15.4zM211.5 8a8 8 0 0 1 8-8c4.5 0 8 3.5 8 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8zm13.9 0c0-3.4-2.6-6-5.9-6a5.8 5.8 0 0 0-5.9 6c0 3.4 2.6 6 5.9 6 3.3 0 5.9-2.6 5.9-6zM245.9.3v15.4h-1.6l-7.9-11.5v11.5h-2V.3h1.7l7.9 11.5V.3h1.9zM252.8 8a8 8 0 0 1 8-8c4.5 0 8 3.5 8 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8zm13.9 0c0-3.4-2.6-6-5.9-6a5.8 5.8 0 0 0-5.9 6c0 3.4 2.6 6 5.9 6 3.3 0 5.9-2.6 5.9-6zM284.3 13.8v1.9h-8.7V.3h2v13.5h6.7zM292.8.3v15.4h-2V.3h2zM310.3 2.2h-4.6v13.5h-2V2.2h-4.5V.3h11.1v1.9zM328.3.3v15.4h-2V8.8h-7.5v6.9h-2V.3h2v6.5h7.5V.3h2z"></path></svg></a><div class="relative z-10 md:hidden"><button class="focus:outline-none block" type="button"><svg class="block h-6 w-6 fill-current text-white" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg></button></div><div class="hidden items-center text-white md:flex"><div class="relative -my-2 mr-5"></div><a class="mr-5 flex items-center hover:text-purple-900" href="https://github.com/inertiajs"><svg class="h-6 w-6 fill-current" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg></a><a class="mr-5 flex items-center hover:text-purple-900" href="https://twitter.com/inertiajs"><svg class="h-6 w-6 fill-current" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path></svg></a><a class="flex items-center hover:text-purple-900" href="https://discord.gg/inertiajs"><svg class="h-6 w-6 fill-current" viewBox="0 0 146 146"><title>Discord</title><path d="M107.75 125.001s-4.5-5.375-8.25-10.125c16.375-4.625 22.625-14.875 22.625-14.875-5.125 3.375-10 5.75-14.375 7.375-6.25 2.625-12.25 4.375-18.125 5.375-12 2.25-23 1.625-32.375-.125-7.125-1.375-13.25-3.375-18.375-5.375-2.875-1.125-6-2.5-9.125-4.25-.375-.25-.75-.375-1.125-.625-.25-.125-.375-.25-.5-.375-2.25-1.25-3.5-2.125-3.5-2.125s6 10 21.875 14.75c-3.75 4.75-8.375 10.375-8.375 10.375-27.625-.875-38.125-19-38.125-19 0-40.25 18-72.875 18-72.875 18-13.5 35.125-13.125 35.125-13.125l1.25 1.5c-22.5 6.5-32.875 16.375-32.875 16.375s2.75-1.5 7.375-3.625c13.375-5.875 24-7.5 28.375-7.875.75-.125 1.375-.25 2.125-.25 7.625-1 16.25-1.25 25.25-.25 11.875 1.375 24.625 4.875 37.625 12 0 0-9.875-9.375-31.125-15.875l1.75-2S110 19.626 128 33.126c0 0 18 32.625 18 72.875 0 0-10.625 18.125-38.25 19zM49.625 66.626c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875.125-7.625-5.625-13.875-12.75-13.875zm45.625 0c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875s-5.625-13.875-12.75-13.875z"></path></svg></a></div></header></div></div><div class="mx-auto flex max-w-6xl py-12 md:px-12 md:py-24 xl:px-0"><nav class="hidden flex-shrink-0 border-r md:block md:w-48 lg:w-56"><div class="-mx-6 mt-4 mb-6 flex justify-center border-b pb-4 md:hidden"><a class="mr-5 flex items-center text-gray-500 hover:text-gray-700" href="https://github.com/inertiajs"><svg class="h-5 w-5 fill-current" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg></a><a class="mr-5 flex items-center text-gray-500 hover:text-gray-700" href="https://twitter.com/inertiajs"><svg class="h-5 w-5 fill-current" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path></svg></a><a class="flex items-center text-gray-500 hover:text-gray-700" href="https://discord.gg/gwgxN8Y"><svg class="h-5 w-5 fill-current" viewBox="0 0 146 146"><title>Discord</title><path d="M107.75 125.001s-4.5-5.375-8.25-10.125c16.375-4.625 22.625-14.875 22.625-14.875-5.125 3.375-10 5.75-14.375 7.375-6.25 2.625-12.25 4.375-18.125 5.375-12 2.25-23 1.625-32.375-.125-7.125-1.375-13.25-3.375-18.375-5.375-2.875-1.125-6-2.5-9.125-4.25-.375-.25-.75-.375-1.125-.625-.25-.125-.375-.25-.5-.375-2.25-1.25-3.5-2.125-3.5-2.125s6 10 21.875 14.75c-3.75 4.75-8.375 10.375-8.375 10.375-27.625-.875-38.125-19-38.125-19 0-40.25 18-72.875 18-72.875 18-13.5 35.125-13.125 35.125-13.125l1.25 1.5c-22.5 6.5-32.875 16.375-32.875 16.375s2.75-1.5 7.375-3.625c13.375-5.875 24-7.5 28.375-7.875.75-.125 1.375-.25 2.125-.25 7.625-1 16.25-1.25 25.25-.25 11.875 1.375 24.625 4.875 37.625 12 0 0-9.875-9.375-31.125-15.875l1.75-2S110 19.626 128 33.126c0 0 18 32.625 18 72.875 0 0-10.625 18.125-38.25 19zM49.625 66.626c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875.125-7.625-5.625-13.875-12.75-13.875zm45.625 0c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875s-5.625-13.875-12.75-13.875z" fill-rule="nonzero"></path></svg></a></div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/">Introduction</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/demo-application">Demo app</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/upgrade-guide">Upgrade guide</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">Installation</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/server-side-setup">Server-side</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/client-side-setup">Client-side</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">Core concepts</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/who-is-it-for">Who is it for</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/how-it-works">How it works</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/the-protocol">The protocol</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">The basics</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/pages">Pages</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/responses">Responses</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/redirects">Redirects</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/routing">Routing</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/title-and-meta">Title & meta</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/links">Links</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/manual-visits">Manual visits</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/forms">Forms</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/file-uploads">File uploads</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/validation">Validation</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/shared-data">Shared data</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">Advanced</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/events">Events</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/testing">Testing</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/partial-reloads">Partial reloads</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/scroll-management">Scroll management</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/authentication">Authentication</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/authorization">Authorization</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/csrf-protection">CSRF protection</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/error-handling">Error handling</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/asset-versioning">Asset versioning</a></li><li class="md:pr-3"><a class="block -ml-3 pl-3 pr-2 py-1 md:py-2 font-medium border-l-4 rounded-r border-purple-400 bg-purple-100 text-purple-700" href="/progress-indicators">Progress indicators</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/remembering-state">Remembering state</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/server-side-rendering">Server-side rendering</a></li></ul></nav><div class="flex-1 overflow-hidden px-6 text-lg leading-relaxed md:pl-12 md:pr-0 lg:pl-16 xl:pl-16 xl:pr-20" id="top"><h1 class="mb-12 text-4xl font-bold leading-none text-gray-700">Progress indicators</h1>Since Inertia requests are made via XHR, there would typically not be a browser loading indicator when navigating from one page to another. To solve this, Inertia displays a progress indicator at the top of the page whenever you make an Inertia visit.Of course, if you prefer, you can disable Inertia's default loading indicator and provide your own custom implementation. We'll discuss both approaches below.<h2 id="default" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Default</h2>Inertia's default progress indicator is a light-weight wrapper around the <a href="https://ricostacruz.com/nprogress/" class="text-blue-700 hover:text-orange-700 font-medium underline">NProgress</a> library. You can customize it via the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">progress</code> property of the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">createInertiaApp()</code> function.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">createInertiaApp({ progress: { // The delay after which the progress bar will appear, in milliseconds... delay: 250, // 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, }, // ... })</code></pre>You can disable Inertia's default loading indicator by setting the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">progress</code> property to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">false</code>.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">createInertiaApp({ progress: false, // ... })</code></pre><h2 id="custom" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Custom</h2>It's also possible to setup your own custom page loading indicators using Inertia <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/events">events</a>. Let's explore how to do this using the <a href="https://ricostacruz.com/nprogress/" class="text-blue-700 hover:text-orange-700 font-medium underline">NProgress</a> library as an example.First, disable Inertia's default loading indicator.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">createInertiaApp({ progress: false, // ... })</code></pre>Next, install the NProgress library.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">npm install nprogress</code></pre>After installation, you'll need to add the NProgress <a href="https://github.com/rstacruz/nprogress/blob/master/nprogress.css" class="text-blue-700 hover:text-orange-700 font-medium underline">styles</a> to your project. You can do this using a CDN hosted copy of the styles.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" /></code></pre>Next, import both <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">NProgress</code> and the Inertia <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">router</code> into your application.<div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white">import NProgress from 'nprogress' import { router } from '@inertiajs/vue3'</code></pre></div>Next, let's add a <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">start</code> event listener. We'll use this listener to show the progress bar when a new Inertia visit begins.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('start', () => NProgress.start())</code></pre>Then, let's add a <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">finish</code> event listener to hide the progress bar when the page visit finishes.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('finish', () => NProgress.done())</code></pre>That's it! Now, as you navigate from one page to another, the progress bar will be added and removed from the page.<h3 id="handling-cancelled-visits" class="mt-16 mb-4 text-xl font-bold leading-tight text-gray-700">Handling cancelled visits</h3>While this custom progress implementation works great for page visits that finish properly, it would be nice to handle cancelled visits as well. First, for interrupted visits (those that get cancelled as a result of a new visit), the progress bar should simply be reset back to the start position. Second, for manually cancelled visits, the progress bar should be immediately removed from the page.We can accomplish this by inspecting the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">event.detail.visit</code> object that's provided to the finish event.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('finish', (event) => { if (event.detail.visit.completed) { NProgress.done() } else if (event.detail.visit.interrupted) { NProgress.set(0) } else if (event.detail.visit.cancelled) { NProgress.done() NProgress.remove() } })</code></pre><h3 id="file-upload-progress" class="mt-16 mb-4 text-xl font-bold leading-tight text-gray-700">File upload progress</h3>Let's take this a step further. When files are being uploaded, it would be great to update the loading indicator to reflect the upload progress. This can be done using the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">progress</code> event.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('progress', (event) => { if (event.detail.progress.percentage) { NProgress.set((event.detail.progress.percentage / 100) * 0.9) } })</code></pre>Now, instead of the progress bar "trickling" while the files are being uploaded, it will actually update it's position based on the progress of the request. We limit the progress here to 90%, since we still need to wait for a response from the server.<h3 id="loading-indicator-delay" class="mt-16 mb-4 text-xl font-bold leading-tight text-gray-700">Loading indicator delay</h3>The last thing we're going to implement is a loading indicator delay. It's often preferable to delay showing the loading indicator until a request has taken longer than 250-500 milliseconds. This prevents the loading indicator from appearing constantly on quick page visits, which can be visually distracting.To implement the delay behavior, we'll use the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">setTimeout</code> and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">clearTimeout</code> functions. Let's start by defining a variable to keep track of the timeout.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">let timeout = null</code></pre>Next, let's update the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">start</code> event listener to start a new timeout that will show the progress bar after 250 milliseconds.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('start', () => { timeout = setTimeout(() => NProgress.start(), 250) })</code></pre>Next, we'll update the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">finish</code> event listener to clear any existing timeouts in the event that the page visit finishes before the timeout does.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('finish', (event) => { clearTimeout(timeout) // ... })</code></pre>In the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">finish</code> event listener, we need to determine if the progress bar has actually started displaying progress, otherwise we'll inadvertently cause it to show before the timeout has finished.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('finish', (event) => { clearTimeout(timeout) if (!NProgress.isStarted()) { return } // ... })</code></pre>And, finally, we need to do the same check in the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">progress</code> event listener.<pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white">router.on('progress', event => { if (!NProgress.isStarted()) { return } // ... }</code></pre>That's it, you now have a beautiful custom page loading indicator!<h3 id="complete-example" class="mt-16 mb-4 text-xl font-bold leading-tight text-gray-700">Complete example</h3>For convenience, here is the full source code of the final version of our custom loading indicator.<div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white">import NProgress from 'nprogress' import { router } from '@inertiajs/vue3' let timeout = null router.on('start', () => { timeout = setTimeout(() => NProgress.start(), 250) }) router.on('progress', (event) => { if (NProgress.isStarted() && event.detail.progress.percentage) { NProgress.set((event.detail.progress.percentage / 100) * 0.9) } }) router.on('finish', (event) => { clearTimeout(timeout) if (!NProgress.isStarted()) { return } else if (event.detail.visit.completed) { NProgress.done() } else if (event.detail.visit.interrupted) { NProgress.set(0) } else if (event.detail.visit.cancelled) { NProgress.done() NProgress.remove() } })</code></pre></div></div><div class="relative -mt-8 hidden w-44 flex-shrink-0 xl:block"><div class="sticky top-0 pt-8"><div class="mb-12"><div class="text-xs font-bold uppercase tracking-widest text-gray-500">On this page</div><ul><li class="mt-4"><a href="#default" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Default</a></li><li class="mt-4"><a href="#custom" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Custom</a></li></ul></div><div class="mb-6 text-xs font-bold uppercase tracking-widest text-gray-500">Our partners:</div><a class="block w-3/4" href="https://forge.laravel.com" title="Laravel Forge"><svg class="h-auto w-full" viewBox="0 0 217.38 39.97"><path fill="#19b59b" d="M77.94.32c4.13 0 6.03.74 7.2 2.22 1.68 2.22 2.64 6.66-.11 17.55S79.2 35.3 76.36 37.64c-1.9 1.48-4.23 2.22-8.36 2.22H54.8c-4.13 0-6.13-.74-7.2-2.22-1.68-2.22-2.63-6.66.22-17.55 2.75-10.9 5.92-15.23 8.78-17.55C58.49 1.06 60.8.32 64.94.32h13zM58.7 30.24c.21.32.74.42 2.43.42h5.08c1.69 0 2.32-.1 2.75-.42.52-.42 1.48-1.48 3.59-10.15 2.22-8.67 1.8-9.73 1.48-10.15-.21-.32-.74-.42-2.43-.42h-4.97c-1.7 0-2.33.1-2.75.42-.53.42-1.48 1.48-3.6 10.15-2.32 8.77-1.9 9.73-1.58 10.15zm51.28-3.17c-.42-.53-.85-.74-3.38-.74h-4.97c-.53 0-1.06.42-1.17.95L97.61 38.9c-.1.53-.64.95-1.16.95H86.19c-.53 0-.85-.42-.74-.95l9.4-37.64c.11-.53.64-.95 1.17-.95h24.1c3.92 0 6.03.53 7.2 2 1.27 1.8 1.69 3.7.32 9.2-1.8 7.4-4.55 9.52-9.3 10.47v.1c3.7.96 5.7 2.23 4.43 7.94-.74 3.27-1.27 6.55-1.58 8.77-.11.53-.64 1.06-1.17 1.06h-10.46c-.43 0-.85-.32-.74-.85.31-2.43.74-4.86 1.37-7.93.42-2.85.21-3.38-.21-4.01zm-.74-9.3c2.22 0 2.85-.11 3.28-.43.74-.53 1.26-1.48 1.8-3.8s.42-3.18 0-3.7c-.32-.32-.85-.43-3.07-.43h-5.5c-.53 0-1.06.42-1.16.95L103 16.92c-.1.53.21.95.74.95h5.5v-.1zM160.94 0c4.23 0 6.45.53 7.72 2 1.48 1.8 2 4.56.84 10.69-.1.53-.63.95-1.16.95h-9.83c-.53 0-.85-.42-.74-.85.42-2.43-.1-2.75-.43-3.17-.2-.32-.63-.42-2.43-.42h-5.07c-1.8 0-2.33.1-2.75.42-.64.53-1.8 2.33-3.7 10.36s-1.59 9.94-1.27 10.47c.21.32.74.42 2.54.42h5.39c1.59 0 2.22-.1 2.64-.42.53-.42 1.59-1.48 2.22-4.33l.1-.32h-7.6c-.53 0-.85-.43-.74-.95l1.48-6.35c.1-.53.63-.95 1.16-.95h18.3c.52 0 .84.42.73.95l-.95 3.91c-2.22 9.63-4.86 13-7.61 15.23-2.01 1.7-4.87 2.33-8.57 2.33H138c-4.13 0-6.14-.74-7.3-2.33-1.8-2.33-2.75-6.66-.1-17.66s5.7-15.43 8.56-17.65C141.06.74 143.39 0 147.51 0h13.43zm41.23 39.97h-31.6c-.54 0-.85-.43-.75-.96L178.7.95c.1-.53.64-.95 1.17-.95h36.79c.63 0 .95.63.53 1.27-1.59 2.54-7.72 7.93-14.6 7.93H189.8c-.52 0-1.05.42-1.16.95l-.95 4.23c-.1.53.21.95.74.95h17.23c.53 0 .85.42.74.95l-1.48 6.66c-.1.53-.63.95-1.16.95h-17.23c-.53 0-1.06.43-1.17.96l-1.16 4.86c-.1.53.21.95.74.95h19.35c.53 0 .84.42.74.95l-1.7 7.3c-.1.63-.63 1.06-1.16 1.06zM50.24.32H6.9c-.53 0-1.05.42-1.16.95l-1.06 3.8c-.1.43.1.75.43.96 1.69.53 10.78.74 9.4 5.81l-.31 1.38-3.7 13.85-.32 1.37c-1.37 5.08-6.24 5.29-8.25 5.82-.42.1-.74.52-.84.95L.02 39c-.1.53.21.96.74.96h17.66c.53 0 1.05-.43 1.16-.96l3.17-12.26c.1-.53.64-.95 1.16-.95h11.32c.53 0 1.06-.43 1.16-.95l1.7-6.56c.1-.53-.22-.95-.75-.95H26.03c-.53 0-.85-.42-.74-.95l1.59-5.92c.1-.53.63-.95 1.16-.95h17.02c.53 0 1.06-.43 1.16-.96l4.55-7.19c.21-.63 0-1.05-.53-1.05z"></path></svg></a><div class="mt-12 border-t pt-12" id="ad"></div></div></div></div></div></div> </body> </html>