How to Display Smooth, Continuous File Processing Progress?

I’m building an Electron app where I need to process large files/folders by splitting them into smaller chunks (ex: 512MB each) and display real-time progress to the user. However, the progress percentage displayed in the console updates irregularly and jumps in large increments (30% → 57% → 91% → 100%).
I would like the progress updates to appear smoother and more gradual, such as 0% → 1% → 2% → … → 100%.

How can I implement smoother progress updates, where the progress percentage increases gradually and consistently, even for large chunk sizes?

Are there any best practices or common techniques for handling smoother progress updates in scenarios like this?

I would like to avoid unnecessary overhead, such as reducing chunk sizes or splitting smaller sub-chunks, if possible.

I’m using Electron, Node.js, and fs for file operations. Any advice or code snippets would be greatly appreciated!

Here’s a simplified version of my code for splitting files into chunks:

const fs = require("fs");
const path = require("path");

async function splitFile(filePath, chunkSize) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    const stream = fs.createReadStream(filePath, { highWaterMark: chunkSize });

    let totalSize = 0;
    let processedSize = 0;

    fs.stat(filePath, (err, stats) => {
      if (err) return reject(err);
      totalSize = stats.size;

      let chunkIndex = 0;

      stream.on("data", (chunk) => {
        const chunkFilePath = `${filePath}.chunk_${chunkIndex + 1}`;
        fs.writeFileSync(chunkFilePath, chunk);
        chunks.push(chunkFilePath);

        processedSize += chunk.length;
        const progress = ((processedSize / totalSize) * 100).toFixed(2);
        console.log(`Progress: ${progress}%`);

        chunkIndex++;
      });

      stream.on("end", () => {
        console.log(`File successfully split into ${chunks.length} chunks.`);
        resolve(chunks);
      });

      stream.on("error", reject);
    });
  });
}

async function main() {
  const filePath = path.resolve(__dirname, "largeFile.mkv");
  const chunkSize = 512 * 1024 * 1024;
  console.log(`Starting to split file: ${filePath}`);
  try {
    const chunks = await splitFile(filePath, chunkSize);
    console.log("Chunks saved to disk:");
    chunks.forEach((chunkFilePath) => console.log(chunkFilePath));
  } catch (error) {
    console.error("Error:", error.message);
  }
}

main();