Progress Bars

    On Windows, you can use a taskbar button to display a progress bar.

    On macOS, the progress bar will be displayed as a part of the dock icon.

    macOS Progress Bar

    All three cases are covered by the same API - the method available on an instance of . To indicate your progress, call this method with a number between 0 and 1. For example, if you have a long-running task that is currently at 63% towards completion, you would call it as 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.

    Example

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

    Open in Fiddle

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

    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