Aller au contenu principal

Barres de progression

Vue d'ensemble​

Une barre de progression permet à une fenêtre de fournir une information à l'utilisateur sur la progression sans avoir besoin de basculer sur cette même fenêtre.

Sous Windows, vous pouvez utiliser un bouton de la barre des tâches pour afficher une barre de progression.

Barre de progression sous Windows

Sous macOS, la barre de progression s'affichera dans le cadre de l'icône du dock.

Barre de progression sous macOS

Sur Linux, l’interface graphique Unity dispose également d’une fonctionnalité similaire qui vous permet de spécifier la barre de progression dans le lanceur.

Barre de progression sous Linux

REMARQUE : sur Windows, chaque fenêtre peut avoir sa propre barre de progression, tandis que sur macOS et Linux (Unity) il ne peut y avoir qu’une seule barre de progression pour l’application.

All three cases are covered by the same API - the setProgressBar() method available on an instance of BrowserWindow. Pour indiquer l'état de la progression vous devez appeler cette méthode avec un nombre entre 0 et 1. Par exemple: Si vous avez une tâche qui dure relativement longtemps et qui est en est actuellement à 63% avant sa finalisation, vous l'appellerez avec setProgressBar(0.63).

Si le paramètre à une valeur négative (par exemple -1) cela supprimera la barre de progression. . Une valeur supérieure à 1 indiquera sous Windows une barre de progression indéfinie et la verrouillera à 100% avec les autres systèmes d'exploitation. Une barre de progression indéterminée reste active mais n’affiche pas de pourcentage réel et est utilisée pour les situations où on ne sait pas combien de temps une opération prendra pour se terminer.

See the API documentation for more options and modes.

Exemple​

Dans cet exemple, nous ajoutons une barre de progression à la fenêtre principale qui s’incrémente au fil du temps à l’aide des timers de Node.js.

docs/fiddles/features/progress-bar (32.1.2)Open in Fiddle
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()
  }
})

Après le lancement de l’application Electron, le dock (macOS) ou la barre des tâches (Windows, Unity) affichera une barre de progression qui commence à zéro et progresse jusqu’à 100 % à la fin. Ensuite cela devrait s'afficher brièvement en indéterminé (Windows) ou vérouillé à 100% (autres systèmes d'exploitation), puis boucler.

Barre de progression du dock macOS

Pour macOS, la barre de progression de votre application sera également indiquée lors de l'utilisation de Mission Control:

Barre de progression avec Mission Control