Hysen Labs
Open-source project
AndersonMamede/electron-progressbar avatar
AndersonMamede

electron-progressbar

electron-progressbar provides an easy-to-use and highly customizable API to show and control progress bars on Electron applications.

100 stars23 forksJavaScriptMIT
01
DEEP OPEN-SOURCE ANALYSIS

electron-progressbar: bars in the window and the taskbar

The library draws a progress bar in its own Electron BrowserWindow and, if you want, mirrors progress onto the taskbar through setProgressBar, so you can check on a job without leaving the current window.

02
DEEP OPEN-SOURCE ANALYSIS

What you get to style

electron-progressbar advertises an easy-to-use and highly customizable API for showing and manipulating progress bars in Electron apps. Appearance can be changed with CSS, along with the text and any other visible information. The BrowserWindow that holds the bar is customizable too. A long options list covers details like whether the bar is indeterminate, its initial and maximum value, whether it closes on completion or aborts on error, the window title, the displayed text, the detail line, a debug flag, and a lang attribute for the page.

03
DEEP OPEN-SOURCE ANALYSIS

Determinate versus indeterminate

The README draws a clean line between the two modes. A determinate bar works when the application can accurately calculate how long a task will take, and it fires a progress event as the value changes. An indeterminate bar is for when the application cannot estimate the duration, which is why the README recommends it for tasks without a predictable length. For indeterminate bars, the completed event only fires when something calls the complete method manually; otherwise the bar keeps showing.

04
DEEP OPEN-SOURCE ANALYSIS

The taskbar trick

Beyond the window itself, the library can show progress in the taskbar using the BrowserWindow setProgressBar method, so a user sees how far a job has come without switching to the window. A customHTML option, flagged as experimental, hands over full control of the bar's rendering when the usual options are not enough. Whatever you build, you must wait for the ready event from the BrowserWindow before creating a bar, since the bar lives inside it, and you can pass the Electron app in as a second constructor parameter.

06
DEEP OPEN-SOURCE ANALYSIS

Official sources

07
Community notes

Community notes