HTML: Disabling a Form on Submit

The following HTML snippet shows how you can disable the Submit button on a form to prevent multiple submissions. When the Submit button is clicked, the button is disabled and a progress bar is displayed.

HTML5 - Styling a Progress Bar

The progress tag introduced in HTML5 can be used to represent the progress of a task.

For example, the following code:

<progress value="80" max="100"></progress>

displays:

Unsupported browser

Different browsers display the progress bar in different styles:

Changing the colour of the progress bar:
Now let's say that you wish to change the colour of the progress bar so that it is red if the value is less than the maximum and green when it equals the maximum. In order to do this, you can use the following CSS, which should work in Chrome, Firefox and IE:
[JSFiddle]

Creating a progress bar without HTML5:
If, like me, you would rather not have browser-specific CSS, then another approach is to create a progress bar without using the HTML5 progress tag. This is quite easy, as demonstrated here:
[JSFiddle]