Skip to main content

Progress Bars进度条

Overview概述​

A progress bar enables a window to provide progress information to the user without the need of switching to the window itself.进度条使窗口能够向用户提供进度信息，而无需切换到窗口本身。

On Windows, you can use a taskbar button to display a progress bar.在Windows上，可以使用任务栏按钮显示进度条。

Windows Progress Bar

On macOS, the progress bar will be displayed as a part of the dock icon.在macOS上，进度条将显示为停靠图标的一部分。

macOS Progress Bar

On Linux, the Unity graphical interface also has a similar feature that allows you to specify the progress bar in the launcher.在Linux上，Unity图形界面也有类似的功能，允许您在启动器中指定进度条。

Linux Progress Bar

NOTE: on Windows, each window can have its own progress bar, whereas on macOS and Linux (Unity) there can be only one progress bar for the application.注意：在Windows上，每个窗口可以有自己的进度条，而在macOS和Linux(Unity)上，应用程序只能有一个进度条。

All three cases are covered by the same API - the setProgressBar() method available on an instance of BrowserWindow. 所有这三种情况都由相同的API覆盖-BrowserWindow实例上可用的setProgressBar()方法。To indicate your progress, call this method with a number between 0 and 1. 若要指示进度，请使用0到1之间的数字调用此方法。For example, if you have a long-running task that is currently at 63% towards completion, you would call it as setProgressBar(0.63).例如，如果您有一个长时间运行的任务，当前完成率为63%，则将其称为setProgressBar(0.63)。

Setting the parameter to negative values (e.g. -1) will remove the progress bar. 将参数设置为负值（如-1）将删除进度条。Setting it to a value greater than 1 will indicate an indeterminate progress bar in Windows or clamp to 100% in other operating systems. 将其设置为大于1的值将指示Windows中的不确定进度条，或在其他操作系统中钳制为100%。An indeterminate progress bar remains active but does not show an actual percentage, and is used for situations when you do not know how long an operation will take to complete.不确定进度条保持活动状态，但不显示实际百分比，用于不知道完成操作需要多长时间的情况。

See the API documentation for more options and modes.有关更多选项和模式，请参阅API文档。

Example示例​

In this example, we add a progress bar to the main window that increments over time using Node.js timers.在本例中，我们向主窗口添加了一个进度条，该进度条使用Node.js计时器随时间递增。

docs/fiddles/features/progress-bar (20.1.1)Open in Fiddle
const { app, BrowserWindow } = require('electron')

let progressInterval

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')

  const INCREMENT = 0.03
  const INTERVAL_DELAY = 100 // ms

  let c = 0
  progressInterval = setInterval(() => {
    // update progress bar to next value
    // values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100%
    win.setProgressBar(c)

    // increment or reset progress bar
    if (c < 2) {
      c += INCREMENT
    } else {
      c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
    }
  }, INTERVAL_DELAY)
}

app.whenReady().then(createWindow)

// before the app is terminated, clear both timers
app.on('before-quit', () => {
  clearInterval(progressInterval)
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

After launching the Electron application, the dock (macOS) or taskbar (Windows, Unity) should show a progress bar that starts at zero and progresses through 100% to completion. 启动Electron应用程序后，dock(macOS)或任务栏（Windows、Unity）应显示一个进度条，从零开始，100%完成。It should then show indeterminate (Windows) or pin to 100% (other operating systems) briefly and then loop.然后，它应该短暂地显示不确定（Windows）或pin到100%（其他操作系统），然后循环。

macOS dock progress bar

For macOS, the progress bar will also be indicated for your application when using Mission Control:对于macOS，在使用任务控制时，还将为您的应用程序显示进度条：

Mission Control Progress Bar