[Electron] ProgressBar 사용하기 (부제: electron-progressbar)

[Electron] ProgressBar 사용하기 (부제: electron-progressbar)

---

Electron에서 TaskBar에 진행 상태를 나타내는 방법이 있다.
setProgressBar를 이용하면 된다.

TaskBar

setProgressBar의 값은 0~1사이의 퍼센트 값을 이용한다.
예를 들어, 63%는 0.63을 입력하면 된다.
그리고, 0보다 낮은 값(-1)으로 설정하면 진행 상태가 제거되고, 1보다 높은 값(2)를 설정하면 진행 상태가 중간 모드로 변경된다.

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

// ex) 50%
win.setProgressBar(0.5)

 

하지만, 어플리케이션 자체에도 진행바를 나타내고 싶은 경우
직접 Bootstrap이나 MaterialUI 같은 프레임워크나 JS와 CSS를 이용하여 직접 화면에 표시해줄 수 있으나,
Electron에서는 electron-progressbar를 이용하면 보다 간편하게 TaskBar와 App에서 진행바를 나타낼 수 있다.

 

 

---

 

Electron-progressbar

https://www.npmjs.com/package/electron-progressbar#indeterminate-progress-bar

 

- 설치

$ npm i electron-progressbar

사용방법은 해당 페이지에 예제와 함께 자세히 나와있으니 확인하면 된다.

 

 

---

https://electronjs.org/docs/tutorial/progress-bar

https://github.com/AndersonMamede/electron-progressbar