添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
const createWindow = () => {
  return new Promise((resolve, reject) => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    title: '主传开',
    show: false,
    backgroundColor: 'pink'
  const view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({x: 0, y: 0,width: 800, height: 600})
  view.webContents.loadFile('loading.html')
  view.webContents.on('dom-ready', ()=>{
    console.log('加载完成')
    mainWindow.show()
  mainWindow.once('ready-to-show', ()=>{
        setTimeout(() => {
          console.log('完成')
          mainWindow.removeBrowserView(view)
    }, 500);  
  ipcMain.on('stop-loading-main', ()=>{
    mainWindow.removeBrowserView(view)
  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
  // Open the DevTools.
  mainWindow.webContents.openDevTools();

loading。html

<style> body { background: white; margin: 0; .lds-spinner
{ position: absolute; top: 0; bottom: 0; margin: auto; left: 0; right: 0; color: official; display: inline-block; width: 80px; height: 80px; .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: #2196F3; .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; @keyframes lds-spinner { opacity: 1; 100% { opacity: 0; </style> </head> <div class="lds-spinner"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>

preload.ts


window.stopLoading = function() { ipcRenderer.send('stop-loading-main')

renderer.ts 

setTimeout(() => {
    window.stopLoading()
}, 1000)

ok 这样就完成了