プログレスバー

概要

プログレスバーを使用すると、ウィンドウ自体に切り替えることなく、ウィンドウからユーザーに進捗情報を提供できます。

Windowsでは、タスクバーボタンを使用してプログレスバーを表示できます。

Windows Progress Bar

macOSでは、プログレスバーはドックアイコンの一部として表示されます。

macOS Progress Bar

Linuxでは、Unityグラフィカルインターフェースにも同様の機能があり、ランチャーでプログレスバーを指定できます。

Linux Progress Bar

注：Windowsでは、各ウィンドウに独自のプログレスバーを設定できますが、macOSとLinux（Unity）では、アプリケーションに対してプログレスバーは1つしか設定できません。

これら3つのケースはすべて、同じAPI、つまり`BrowserWindow`インスタンスで使用可能な`setProgressBar()`メソッドで処理されます。進捗状況を示すには、`0`から`1`までの数値を指定してこのメソッドを呼び出します。たとえば、完了まで63%の時間がかかる長時間実行タスクがある場合は、`setProgressBar(0.63)`として呼び出します。

パラメータを負の値（例： `-1`）に設定すると、プログレスバーが削除されます。 `1`より大きい値に設定すると、Windowsでは不確定プログレスバーが表示され、他のオペレーティングシステムでは100%に固定されます。不確定プログレスバーはアクティブなままですが、実際のパーセンテージは表示されません。操作の完了にかかる時間がわからない場合に使用されます。

APIドキュメントを参照して、その他のオプションとモードを確認してください。

例

この例では、Node.jsタイマーを使用して時間とともに増加するプログレスバーをメインウィンドウに追加します。

docs/fiddles/features/progress-bar (33.0.1)Fiddleで開く

main.js
index.html

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

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()
  }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>Keep an eye on the dock (Mac) or taskbar (Windows, Unity) for this application!</p>
    <p>It should indicate a progress that advances from 0 to 100%.</p>
    <p>It should then show indeterminate (Windows) or pin at 100% (other operating systems)
      briefly and then loop.</p>
</body>
</html>

Electronアプリケーションを起動すると、ドック（macOS）またはタスクバー（Windows、Unity）にプログレスバーが表示され、ゼロから開始して100%まで進みます。その後、短時間不確定（Windows）または100%に固定（他のオペレーティングシステム）され、ループします。

macOS dock progress bar

macOSの場合、Mission Controlを使用している場合も、アプリケーションのプログレスバーが表示されます。

Mission Control Progress Bar

概要​

例​

概要

例