Electron how to show loading spinner while loading page in BrowserWindow

user_3640883 0
Viewed 3875

I'm building an Electron Browser app. This app will load an external url (only) My question is how to add a spinner (gif image) while loading the page. I know that there is an even 'did-start-loadin'. this is working fine, but I did not find a way to show a runner. Also there is not status bar option in Electron / BrowserWindow. putting it there would be my favorite.

any ideas how to do that?

electron spinner
2 Answers

If you're looking for just a basic indication that webapp is loading some url content, this code may help. It changes the window's title and shows a progress bar (you may also change icon etc probably). After creating the main window:

const mainWindow = new BrowserWindow({ .... });      

mainWindow.webContents.on('did-start-loading', () => {
    mainWindow.setTitle(APP_NAME + ' * Loading ....');
    mainWindow.setProgressBar(2, { mode: 'indeterminate' }) // second parameter optional
});

mainWindow.webContents.on('did-stop-loading', () => {
    mainWindow.setTitle(APP_NAME);
    mainWindow.setProgressBar(-1);
});

If anyone can provide some means for animated title, happy to hear (probably some setInterval/clearInterval bundle, did not figure out yet).

Also can do mainWindow.setOpacity(0.8) on loading, but to me that does not look nice.

user_8386520
Related