To create a splash screen for your Electron.js application, you can display an HTML file containing your splash screen content before your main window is ready to show. This will provide users with a more polished experience.
First, create an HTML file containing your splash screen content. This file will be displayed while your main window is being loaded. You can include any kind of content you want, such as images or animations.
In your main Electron.js file, load the splash screen HTML file before the main window is ready to show. You can do this in the createWindow function of your main file.
Here's an example of how to do it:
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the splash screen window
const splashWindow = new BrowserWindow({
width: 400,
height: 300,
transparent: true,
frame: false,
alwaysOnTop: true,
webPreferences: {
nodeIntegration: true
}
})
// Load the splash screen HTML file
splashWindow.loadFile('splash.html')
// Create the main window after a short delay
setTimeout(function() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// Load your main HTML file
mainWindow.loadFile('index.html')
// Destroy the splash screen window
splashWindow.destroy()
}, 2000) // Set the delay time here (in milliseconds)
}
// Create the app window when Electron is ready
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit the app when all windows are closed
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
In this example, a new BrowserWindow is created to display the splash screen, and the loadFile method is used to load the splash.html file. After a short delay (in this case, 2000 milliseconds), the main window is created and its loadFile method is used to load the index.html file. Finally, the splashWindow is destroyed to remove the splash screen.
Note that the alwaysOnTop and transparent options are set to true and the frame option is set to false for the splash screen window to ensure that it appears on top of all other windows and does not have a visible frame. You can customize these options as needed to achieve the desired look for your splash screen.