|
|
@@ -31,30 +31,70 @@ 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, whereas setting it to values greater than `1` (e.g. `2`) will switch the
|
|
|
-progress bar to indeterminate mode (Windows-only -- it will clamp to 100%
|
|
|
-otherwise). In this mode, a progress bar remains active but does not show an
|
|
|
-actual percentage. Use this mode for situations when you do not know how long
|
|
|
-an operation will take to complete.
|
|
|
+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.
|
|
|
|
|
|
See the [API documentation for more options and modes][setprogressbar].
|
|
|
|
|
|
## Example
|
|
|
|
|
|
-Starting with a working application from the
|
|
|
-[Quick Start Guide](quick-start.md), add the following lines to the
|
|
|
-`main.js` file:
|
|
|
+In this example, we add a progress bar to the main window that increments over time
|
|
|
+using Node.js timers.
|
|
|
|
|
|
```javascript fiddle='docs/fiddles/features/progress-bar'
|
|
|
-const { BrowserWindow } = require('electron')
|
|
|
-const win = new BrowserWindow()
|
|
|
-
|
|
|
-win.setProgressBar(0.5)
|
|
|
+const { app, BrowserWindow } = require('electron')
|
|
|
+
|
|
|
+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 = 0
|
|
|
+ }, 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()
|
|
|
+ }
|
|
|
+})
|
|
|
```
|
|
|
|
|
|
-After launching the Electron application, you should see the bar in
|
|
|
-the dock (macOS) or taskbar (Windows, Unity), indicating the progress
|
|
|
-percentage you just defined.
|
|
|
+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.
|
|
|
|
|
|
|
|
|
|
Jeremy Foster