Display progress bar after form submit

Example of my requirement: If a web page has a form and when you submit the form, that page will fetch some data from a database and then display the output. While fetching the data it needs 9-10 seconds of time. On that particular time I need a loader or a progress bar to let user know that something is going on in the background. progress bar would be more preferable. User can see how much time left to load the web page

I am using the below code that I have pasted here to show a loader on page loading.

But this code is not serving my purpose what I am looking for. It is simply showing a loader, that too the loader is not appearing when any background work is happening. It is being visible when the web page is almost ready to load.

I am using CGI script (Perl and HTML) to write my code which runs on server.

<script>
document.onreadystatechange = function () {

var state = document.readyState

if (state == 'complete') {
    document.getElementById('interactive');
    document.getElementById('loading').style.visibility="hidden";
}
}
</script>
<style>
#loading{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("https://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}
</style>

<body><div id="loading"></div></body>
Tags: