I'm trying to make a loading screen for my webapp. I'm using PHP backend and calling a DB query. The fact is, that I expect it to take up to 5 seconds (which is fine). But I'd like to show a loading screen in the meantime and I've found myself somehow struggling with it.
I 100% knew this wouldn't work, but just for illustration of what I need to achieve, I tried this:
<div id='loading'>i am loading</div>
<?php
$result = $db->query("some sql here");
if ($result)
echo "<script>document.getElementById('loading').style.display = 'none';</script>";
?>
Although this piece of code is obviously wrong, I hope it is clear from it what I need. NOTE: I cannot really afford redirecting to another page for the loading screen (I saw this as one of the options), unless it is the only possible solution like this. Is there another way of doing this?
If you're just doing normal form submission, all you have to do is show the loading screen when you submit the form. When the response is received the page will reload, which will remove the loading screen automatically.
I've found this comment as a nicely working solution for this problem.