Add global progress bar by Arthur Minasyan - Tricks

This component shows a progress bar at the top of the page when we navigate from one page to another.

Add this piece of code to the service provider.

Filament::registerScripts([
    'https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js',
], shouldBeLoadedBeforeCoreScripts: true);

Then paste this into your css file.

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}
 
.pace-inactive {
    display: none
}
 
.pace .pace-progress {
    background: #3b82f6;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px
}