Tags
electron
Asked 6 years ago
10 Jan 2018
Views 5188
angeo

angeo posted

How to create splash screen on Electron Js application ?

How to create splash screen on Electron Js application before mainWindow start to run ?

my concept is load loading bar or My Application logo untill mainWindow Ready
here is the example code what i burning there



const {app, BrowserWindow} = require('electron');

function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600});

    // Emitted when the window is closed.
    win.on('closed', () => {
        console.log('closed!');
        win = null
    })
 

    // and load the url of the app.
    win.loadURL('https://www.google.com');
}

app.on('ready', createWindow);
jqueryLearner

jqueryLearner
answered Apr 25 '23 00:00

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.
Post Answer