how to use a progress bar in electron
Question
So, I am building an electron application and that application compares two csv files and create a file with data which is in both files. Now while this process is running I want to show a progress bar on browser window so how can I create a progress bar that will show progress of that script ? PS:- I don't want to open any new browser window. everything should be on same window.
2 answers
solution1
1 2020-10-14 07:38:18
You can create a simple progress bar by using nested divs:
const progressBar = document.getElementById('bar'); function setBar(percentage) { progressBar.style.width = percentage + "%"; }
#bar-container { width: 400px; height: 25px; background-color: lightgray; } #bar { width: 0; height: 100%; background-color: firebrick; transition: width 0.2s; }
<button onClick="setBar(0);">0%</button> <button onClick="setBar(20);">20%</button> <button onClick="setBar(40);">40%</button> <button onClick="setBar(60);">60%</button> <button onClick="setBar(80);">80%</button> <button onClick="setBar(100);">100%</button> <div id="bar-container"> <div id="bar"></div> </div>
solution2
0 2021-08-21 10:42:20
In your index.html (or which page want to use it) add a link, progress and script elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo progress</title>
</head>
<body>
<a href="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_5MG.mp3" download >Download demo file</a>
<progress value="0" max="100" id="progress"></progress>
<script type="text/javascript">
window.progress = document.getElementById('progress')
</script>
</body>
</html>
(If you want you can use this site for testing: https://file-examples.com/ )
In your main.js file add this inside the createWindow function:
ses.on("will-download", (event, downloadItem, webContents) => {
let fileName = downloadItem.getFilename();
let fileSize = downloadItem.getTotalBytes();
// This will save the file to your desktop:
downloadItem.setSavePath(app.getPath("desktop") + `/${fileName}`);
downloadItem.on("updated", (event, state) => {
let received = downloadItem.getReceivedBytes();
if (state === 'progressing' && received) {
let progress = Math.round((received / fileSize) * 100);
webContents.executeJavaScript(`window.progress.value = ${progress}`)
}
});
});
When you click the link the progress bar will show your download status in your index.html .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.