Taskbar Progress Bar (Windows & macOS)

    在Windows环境下，进度条被显示在任务栏按钮上。

    在MacOS环境下，进度条将被显示在dock栏图标上

    macOS 进度条

    这三种环境中的进度条功能由同一个API实现：实例下的setProgressBar()方法。 此方法以介于 0 和 1 之间的小数表示进度。 例如，如果有一个耗时很长的任务，它当前的进度是63%，那么你可以用setProgressBar(0.63)来显示这一进度。

    将参数设置为负值 (例如， -1) 将删除progress bar。 设定值大于 1 在 Windows 中将表示一个不确定的进度条 ，或在其他操作系统中显示为 100%。 一个不确定的progress bar 仍然处于活动状态，但不显示实际百分比， 并且用于当 您不知道一个操作需要多长时间才能完成的情况。

    示例

    在此示例中，我们将进度栏添加到main window中，该窗口会使用node.js的计时器实现随着时间的推移而进度增长。

    • index.html
    • main.js
    1. const { app, BrowserWindow } = require('electron')
    3. let progressInterval
    5. function createWindow () {
    6.   const win = new BrowserWindow({
    7.     width: 800,
    8.     height: 600
    9.   })
    11.   win.loadFile('index.html')
    13.   const INTERVAL_DELAY = 100 // ms
    15.   let c = 0
    16.   progressInterval = setInterval(() => {
    17.     // update progress bar to next value
    18.     // values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100%
    19.     win.setProgressBar(c)
    21.     // increment or reset progress bar
    22.     if (c < 2) {
    23.       c += INCREMENT
    24.     } else {
    25.       c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
    26.     }
    27.   }, INTERVAL_DELAY)
    28. }
    31. // before the app is terminated, clear both timers
    32. app.on('before-quit', () => {
    33.   clearInterval(progressInterval)
    34. })
    36. app.on('window-all-closed', () => {
    37.   if (process.platform !== 'darwin') {
    38.     app.quit()
    39.   }
    40. })
    42. app.on('activate', () => {
    43.   if (BrowserWindow.getAllWindows().length === 0) {
    44.     createWindow()
    45. })

    Open in Fiddle

    启动 Electron 应用程序后，Dock (macOS) 或 taskbar (Windows, Unity) 应该显示一个进度条, 从零开始, 到100%到完成。 应该显示不确定的 (Windows) 或短暂的固定到100% (其他操作系统) 并然后循环。

    macOS dock 进度条