Перейти к основному содержанию

Taskbar Progress Bar (Windows & macOS)

Обзор

Progress bar позволяет окну предоставлять информацию о прогрессе пользователю без необходимости переключения на само окно.

В Windows вы можете использовать кнопку панели задач для отображения progress bar.

Windows Progress Bar

На macOS progress bar будет отображаться как часть dock icon.

macOS Progress Bar

На Linux графический интерфейс Unity также имеет аналогичную функцию, которая вам указать планку прогресса в пусковой установке.

Linux Progress Bar

ПРИМЕЧАНИЕ: на Windows, каждое окно может иметь свой собственный планку прогресса, в то время как на macOS и Linux (Unity) может быть только одна планка прогресса для приложения.


Все три случая охватываются одним и тем же API - setProgressBar() методом, доступным на экземпляре BrowserWindow. Чтобы указать свой прогресс, позвоните в этот метод с номером между 0 и 1. Например, если у вас есть давняя задача, которая в настоящее время 63% к завершению, вы назвали бы ее как setProgressBar(0.63).

Setting the parameter to negative values (e.g. -1) will remove the progress bar. Setting it to a value greater than 1 will indicate an indeterminate progress bar in Windows or clamp to 100% in other operating systems. 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.

Просмотрите документацию по API для большего количества опций и режимов.

Пример

In this example, we add a progress bar to the main window that increments over time using Node.js timers.

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. It should then show indeterminate (Windows) or pin to 100% (other operating systems) briefly and then loop.

macOS dock progress bar

Для macOS планка прогресса также будет указана для вашей приложения использовании Mission Control:

Mission Control Progress Bar