Member Avatar for James_43

Hi all,

I'm very very new when it comes to JavaScript, but I understand it's what I need to solve my problem.

Basically, I have a PHP script that takes a while to process (several minutes). This script is linked from my homepage and when the script finishes it redirects back to the homepage. I want to know if it's possible to have a simple loading animation on my homepage whilst the script executes, just something to show people that the script is still actually doing something.

Can anyone make any suggestions?

  • 4 Contributors
  • 6 Replies
  • 11K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by James_43
Member Avatar for hericles

Is the PHP process started via AJAX? If it is, you can display a spinner gif when the AJAX call is first made (using jQuery or similar) and switch it off when the reponse comes back.
If the page starts the script and then redirects you can just have a spinner without worrying about the AJAX part.

Member Avatar for James_43

It's not started via Ajax, but is that something I should look into?

Member Avatar for Chris_33

Assuming that the script page has no other content on it and when done you get bounced back to the home page you can place a loading image on the body background.

<style type="text/css">
    html,body{height:100%; width:100%;} 
    .loading{background:transparent url('/images/some-loading-animation.gif') no-repeat center center;} 
</style>
<body class="loading">

If you do have content to display on the script page you can just place a loader animation on a <div class="loading"> somewhere on the page.

If you were not redirecting the user away from this page on completion you would need to hide .loadingon php script completetion by setting display:none; on .loading elements with javascript. With jquery loaded your php script could write the following to the end of the page on completion:

<script> $('.loading').fadeOut(1000); </script>

You can search google for loading animations but be respectful of copyrights:
https://www.google.com/search?q=loading+file:gif&biw=1866&bih=1072&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMIxMmB_fz2yAIVAdkeCh2tJAZc&dpr=0.9#tbm=isch&q=loading+animated+gif+icons&imgrc=s70KO5AD52DP5M%3A

Edited by Chris_33 because: typo fixes
Member Avatar for Taywin

If you are not using Ajax but the load time after submission is so long, you could easily accomplish the display with JavaScript. I DO NOT recommend using Ajax if the process is that long (several minutes as you said) on your server before the page is redirected to another page. If you are submitting a form, then implement a function in onsubmit() to display a loading animation/image, and then submit the form. In your server side, simply work on whatever you need. Once it is done, the page will be refreshed which is what your server side redirect it to anyway.

Edited by Taywin
Member Avatar for James_43

Thanks for your suggestions!

Chris_33. the script has no content on it, it just bounces back to the index. But from the front end, it looks as if it stays on the index page. I like the idea of using an animation on the body, but I don't think that would work in this case since the user never actually views that page.

Taywin, I don't submit a form, but basically what you are saying is just before the code to execute the script I load an animation, which will then go away once the script returns and the pae reloads?

Member Avatar for James_43

Found an easy way to do it.

You were right about their being tonnes of loading animations online, I got a cool CSS one. Then I build my first div container with an overlay to blur out the page.

When I click the button that executes the script, I use the JS function:

        function showDiv() {
            document.getElementById('loading').style.display = "block";
            document.getElementById('animation').style.display = "block";
            document.getElementById('text').style.display = "block";
        }

To reveal the containers :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.