Progress Bars | Electron
https://www.electronjs.org/de/docs/latest/tutorial/progress-bar • 67 KB fetched Open original page
Progress Bars | Electron
Zum Hauptteil springen
Electron Dokumentation API Blog Tools
* Electron Forge
* Elektro-Fiddle
Community
* Kontrolle
* Showcase
* Ressourcen
Veröffentlichungen Deutsch
* English
* Deutsch
* Español
* Français
* 日本語
* Português
* Русский
* 中文
Suche
* Loslegen
* Prozesse in Electron
* Bewährte Verfahren
* Beispiele
* Nachtmodus
* Device Access
* In-App Purchases
*
* Tastenkürzel
* Deep Links
* Desktop Launcher Actions
*
* Menus
* Multithreading
* Natives Datei Drag & Drop
* Navigationsverlauf
* Benachrichtigungen
* Offscreen Rendering
* Online/Offline Ereigniserkennung
* Progress Bars
* Kürzliche Dokumente
*
*
* Darstellung von Dateien in einem BrowserWindow
*
* Rechtschreibprüfung
* Web Embeds
* Taskbar Customization
*
* Window Customization
* Entwicklung
* Native Node Modules
* Distribution
* Testen und Debuggen
* References
* Beitragen
*
* Beispiele
* Progress Bars Auf dieser Seite
Progress Bars
Übersicht
A progress bar enables a window to provide progress information to the user without the need of switching to the window itself.
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.
On Linux, the Unity graphical interface also has a similar feature that allows you to specify the progress bar in the launcher.
NOTE: on Windows, each window can have its own progress bar, whereas on macOS and Linux (Unity) there can be only one progress bar for the application.
All three cases are covered by the same API - the setProgressBar() method available on an instance of BrowserWindow . 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.
See the API documentation for more options and modes .
Beispiel
In this example, we add a progress bar to the main window that increments over time using Node.js timers.
docs/fiddles/features/progress-bar ( 43.4.0 ) Open in Fiddle
* main.js
* index.html 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 ( )
}
} )
<! DOCTYPE html >
< html >
< head >
< meta charset = " UTF-8 " >
< title > Hello World! </ title >
< meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " />
</ head >
< body >
< h1 > Hello World! </ h1 >
< p > Keep an eye on the dock (Mac) or taskbar (Windows, Unity) for this application! </ p >
< p > It should indicate a progress that advances from 0 to 100%. </ p >
< p > It should then show indeterminate (Windows) or pin at 100% (other operating systems)
briefly and then loop. </ p >
</ body >
</ 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.
For macOS, the progress bar will also be indicated for your application when using Mission Control :
Diese Seite bearbeiten
Vorherige
Online/Offline Ereigniserkennung
Nächste
Kürzliche Dokumente
* Übersicht
* Beispiel
Dokumentation
* Erste Schritte
* API-Referenz
Checklisten
* Performance
* Sicherheit
Tools
* Electron Forge
* Elektro-Fiddle
Community
* Kontrolle
* Ressourcen
* Discord
* Bluesky
* X
* Mastodon
* Stack Overflow
Mehr
* GitHub
* Open Collective
* Infrastruktur Dashboard
Copyright OpenJS Foundation und Electron Mitwirkenden. Alle Rechte vorbehalten. Die OpenJS Foundation hat eingetragene Marken und verwendet Marken. Für eine Liste der Marken der OpenJS Foundation , lesen Sie bitte unsere Markenrichtlinie und Markenliste . Marken und Logos nicht auf der Liste der Marken der OpenJS Foundation sind Marken™ oder eingetragene® Marken ihrer jeweiligen Inhaber. Der Gebrauch von ihnen impliziert keine Zugehörigkeit oder Zustimmung von ihnen. Die OpenJS Foundation | Nutzungsbedingungen | Datenschutzrichtlinie | Satzung | | | Markenrichtlinie | Markenliste | Cookie Policy
Hosting and infrastructure graciously provided by
Links found on this page
- Zum Hauptteil springen [direct]
- Electron [direct]
- Dokumentation [direct]
- API [direct]
- Blog [direct]
- Electron Forge [direct]
- Elektro-Fiddle [direct]
- Kontrolle [direct]
- Showcase [direct]
- Ressourcen [direct]
- Veröffentlichungen [direct]
- English [direct]
- Español [direct]
- Français [direct]
- 日本語 [direct]
- Português [direct]
- Русский [direct]
- 中文 [direct]
- Prozesse in Electron [direct]
- Bewährte Verfahren [direct]
- Beispiele [direct]
- Nachtmodus [direct]
- Device Access [direct]
- In-App Purchases [direct]
- Tastenkürzel [direct]
- Deep Links [direct]
- Desktop Launcher Actions [direct]
- Menus [direct]
- Multithreading [direct]
- Natives Datei Drag & Drop [direct]
- Navigationsverlauf [direct]
- Benachrichtigungen [direct]
- Offscreen Rendering [direct]
- Online/Offline Ereigniserkennung [direct]
- Kürzliche Dokumente [direct]
- Darstellung von Dateien in einem BrowserWindow [direct]
- Rechtschreibprüfung [direct]
- Web Embeds [direct]
- Taskbar Customization [direct]
- Window Customization [direct]
- Entwicklung [direct]
- Native Node Modules [direct]
- Distribution [direct]
- Testen und Debuggen [direct]
- References [direct]
- Beitragen [direct]
- setProgressBar() [direct]
- docs/fiddles/features/progress-bar ( 43.4.0 ) [direct]
- Open in Fiddle [direct]
- Mission Control [direct]
- Diese Seite bearbeiten [direct]
- Sicherheit [direct]
- Discord [direct]
- Bluesky [direct]
- X [direct]
- Mastodon [direct]
- Stack Overflow [direct]
- GitHub [direct]
- Open Collective [direct]
- Infrastruktur Dashboard [direct]
- OpenJS Foundation [direct]
- Markenrichtlinie [direct]
- Markenliste [direct]
- Nutzungsbedingungen [direct]
- Datenschutzrichtlinie [direct]
- Satzung [direct]
- | [direct]
- Cookie Policy [direct]
|
|