HTML Progress bar

[kanshul2013]

I have an html page where user fills in a form, attaches a file and submits the form. The file attached could be quite big, say 300MB in size, so I need to show a progress bar to the user while the submission is in progress.

I’m not able to figure out where to put the html5 progress tag tag so that it shows after the form is submitted and disappears when a response is returned.

<form name="import_form" action='<%= request.getParameter("url") %>/upload_archive' method="post" enctype="multipart/form-data">
    <input type="text" name="engagement" value='<%= engagement %>'  /> <br/>
    <input type="text" name="package_reference"  /> <br/>
    <input type="text" name="package_desc"  /><br/>
    <input type="text" name="issue_reason" value='<%= issue_reason %>' /><br/>

    <label class="label-style">Please select the documents to import : </label>
             <label class="label-style">Select zip file :</label>
             <label class="cabinet"><input type="file" class="file" name="zip_file_import" /></label>
    <label class="label-style">Select manifest file :</label>
<label class="cabinet"><input type="file" class="file" name="manifest_file_import" />
    <input type="submit" value="Upload" class="button-style" />

</form>
<progress max="100" value="60">
</progress>

[kanshul2013]

The idea is that user should have some way to know that operation is in progress and should not be in under an impression that nothing is happening. So, even if it’s not a progress bar but something else like a cursor change etc., that should do as well.

[Paulie_D]

You’re going to need a JS solution similar to a loading graphic.

https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

https://css-tricks.com/css3-progress-bars/

[kanshul2013]

Is a more straight forward solution possible?

I added the below Javascript function

<script>
    function formSubmit() {
        document.getElementById("import_form").submit();
        document.body.style.cursor = "crosshair";
    }
</script>

and in HTML

<input type="button" value="Upload" onclick="formSubmit()" class="button-style" />

This works fine but the only problem is that cursor change is not very prominent to the user. Is it possible to make it bit more prominent, like having a red color circle going round etc. without adding too much complexity.

[Paulie_D]

Is it possible to make it bit more prominent, like having a red color circle going round etc. without adding too much complexity.

Are you talking about a custom cursor?

What about cursor: wait or cursor:progress?

Have you abandoned the idea of a progress bar?

[kanshul2013]

I have already tried cursor: wait or cursor:progress but it is not prominent enough for the user.
Need something a bit more prominent. I would like to keep it simple, it’s ok if it’s not a progress bar.

[Paulie_D]

You can, I think, use a custom cursor but it’s not easy.

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/everything-you-need-to-know-about-the-css-cursor-rule/

[Chris Coyier]

http://codepen.io/netsi1964/pen/DsAhE

[Author]

Posts