Creating Animated Progress Bar for HTML5 File Upload

We created a file upload page using HTML5 File Upload. Please check our previous tutorials to see how to this is done.

We'd like to add a real-time progress bar for during the upload process. Click where you want to insert the progress bar (1). Open the insert panel and open DMXzone's bootstrap 3 elements (2). Select the progress bar element (3).

Edit the default value for the progress bar width. Set this to 0 (1). With the progress bar still selected, add a new dynamic attribute (2). Open styling (3), then select style (4).

Enter the CSS property you want to dynamically change. In our case, we enter "width" (1). Select its value (2). Expand the upload progress group (3). Select percent (4-5).

As this is a percentage value we need to manually add: + and %, wrapped in single quotes (1). Check the important checkbox (2). 

In order to show the progress bar only during the upload process, select its main div, having the class of progress (1). Add a new dynamic attribute (2). And under display (3), select show (4). 

Select when to show it (1). Under state, select "uploading" (2-3). 

And we are done! Let's preview the results.

The upload progress appears once we select a file and hit the submit button. Then, when the upload finishes, the progress bar is hidden again. That's how easy it is to add animated progress bar using HTML5 File Upload.