Skip to main content

진행 상태 표시줄

개요​

진행 상태 표시줄은 사용자가 직접 해당 윈도우로 전환하지 않고도 진행 상황을 확인할 수 있게 해준다.

Windows에서는 작업 표시줄 버튼을 통해 진행 상태 표시줄을 표시할 수 있다.

Windows Progress Bar

macOS에서는 진행 상태 표시줄이 독 아이콘의 일부로 표시된다.

macOS Progress Bar

Linux의 Unity 그래픽 인터페이스도 런처에 진행 상태 표시줄을 지정할 수 있는 유사한 기능을 제공한다.

Linux Progress Bar

참고: Windows에서는 각 윈도우마다 독립적인 진행 상태 표시줄을 가질 수 있지만, macOS와 Linux(Unity)에서는 애플리케이션당 하나의 진행 상태 표시줄만 존재한다.

세 가지 경우 모두 동일한 API인 BrowserWindow 인스턴스의 setProgressBar() 메서드로 처리할 수 있다. 진행 상황을 표시하려면 0에서 1 사이의 숫자를 인자로 전달한다. 예를 들어, 장시간 실행되는 작업이 63% 완료된 상태라면 setProgressBar(0.63)를 호출한다.

매개변수를 음수 값(예: -1)으로 설정하면 진행 상태 표시줄이 제거된다. 1보다 큰 값을 설정하면 Windows에서는 불확정 상태의 진행 상태 표시줄이 표시되고, 다른 운영체제에서는 100%로 고정된다. 불확정 상태의 진행 상태 표시줄은 실제 백분율을 표시하지 않고 활성 상태를 유지하며, 작업 완료 시간을 예측할 수 없는 상황에서 사용한다.

더 많은 옵션과 모드에 대해서는 API 문서를 참고한다.

예제​

이 예제에서는 Node.js 타이머를 사용해 시간이 지남에 따라 증가하는 프로그레스 바를 메인 윈도우에 추가한다.

docs/fiddles/features/progress-bar (34.1.1)Open in Fiddle
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()
  }
})

Electron 애플리케이션을 실행한 후, 도크(macOS) 또는 작업 표시줄(Windows, Unity)에 0에서 시작해 100%까지 진행되는 프로그레스 바가 표시된다. 그리고 잠시 동안 무한 진행 상태(Windows) 또는 100% 고정 상태(다른 운영체제)를 보여준 후 다시 반복된다.

macOS 도크 프로그레스 바

macOS에서는 Mission Control을 사용할 때도 애플리케이션의 프로그레스 바가 표시된다.

Mission Control 프로그레스 바