Click here to Skip to main content
12,999,580 members (105,838 online)
Click here to Skip to main content
Add your own
alternative version


8 bookmarked
Posted 6 Sep 2011

An HTML5 ProgressBar using Web Workers

, 6 Sep 2011
Rate this:
Please Sign up or sign in to vote.
A look at an advanced HTML5 feature: Web workers

HTML5 is here to stay. HTML5 is not about markup only. It's about constructing, styling and adding client-side features to a modern website. I suggest you read my introductory post on HTML5 if you want to get a quick glimpse of its new features. Considering the exciting client-side capabilities, what I really like on HTML5 are the JavaScript libraries which really enhance the end-user experience.

Today, we'll have a look at an advanced HTML5 feature: Web workers. Web workers introduce multi-threading to the web browsers. They define an API for executing scripts concurrently, separating the UI from any background process. And, yes, the language they use is JavaScript. JavaScript has been a little misunderstood, but it is now commonly thought as a robust and powerful programming language.

We'll use web workers' power to create a client-side progress bar between the page UI and a background script (specifically, this script will calculate some prime numbers). No server-side staff for now. Before implementing this, let's have a look at how web workers are used.

Creating the Background Script

Firstly, we need to decide what our long-running background process is all about. In our case, this is about calculating prime numbers. Secondly, we need to update the HTML page by sending a proper message to it.

The first part is just Maths. It could be ANY long-running process, so do not care of the implementation!

The second part is accomplished by the postMessage function. postMessage is able to send an argument of any type back to the UI thread!

Here is "robot.js" file, containing the long-running process of finding prime numbers:

var found = 0;
var n = 1;
var total = 0;
var THRESHOLD = 10000;

while (total < THRESHOLD) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i++) {
        if (!(n % i == 0)) {
        else {

Using the Web Worker

Web workers are declared as any other JavaScript object, getting the background JavaScript file as a parameter. Note that we do not need to import "robot.js" using HTML tags; it will be seamlessly used from the worker.

Worker worker = new Worker("robot.js");

The worker is updated when postMessage is called. As a result, we need to handle the event generated. This is done via onMessage function:

worker.onmessage = function (event) {
    var result =;
}; contains the objects (in our case, the prime number found) passed from the background script to the user interface.

Testing Web Workers

Have in mind that not all browsers support web workers properly. I suggest you use Internet Explorer 10 preview, as it is supposed to be the most modern option (and scores really great in the benchmarks), but the latest releases of Chrome, Firefox and Opera will do the job pretty well, too. Here is the result of our demo in action!

HTML5 web workers progressbar

View the demo, download the source code and experiment. Ι have included some simple extra code for calculating the progressbar's percentage as well as some CSS3 styling. Enjoy!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Vangos Pterneas
CEO LightBuzz
United States United States
Vangos Pterneas is a Microsoft Most Valuable Professional in the Kinect technology. He helps companies from all over the world grow their revenue by creating profitable software products. Vangos is the founder of LightBuzz Inc. and author of two technical books.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Jenny Quinn14-Sep-11 2:56
memberJenny Quinn14-Sep-11 2:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170624.1 | Last Updated 6 Sep 2011
Article Copyright 2011 by Vangos Pterneas
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid