Untitled

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Example</title>
</head>
<body>
<button>Simulate</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

$(document).ready(function () {
  var $button = $('button');

  var worker = new Worker("worker.js");
  worker.addEventListener("message", function(e) {
    if (e.data) {
      switch (e.data.cmd) {
        case "progress":
          $button.text((e.data.value / 250).toFixed(0) + "%");
          break;
        case "complete":
          $button.text("Simulate");
          break;
      }
    }
  });
  $button.on("click", function() {
    worker.postMessage("start");
  });
});

/* Styles go here */

this.addEventListener("message", function(e) {
  if (e.data === "start") {
    // To make progress visible, had to use a large number (10000x your original)
    for (var n = 0; n < 250000000; ++n) {
      if (n % 10000 === 1) {
        this.postMessage({cmd: "progress", value: n / 10000});
      }
    }
    this.postMessage({cmd: "complete"});
  }
});