Can anybody suggest a good way to implement a preloader .gif in the following set up:
On my first page I have a rather long form with several checkboxes. After the user completes the form and clicks submit the values are stored in a database. I then redirect to another file that has a fairly complicated bunch of SQL statements that comparers the users answers against several tables in my database and churns out a list of values that I then put into an array. This array is then then passed into a function containing a few API calls. This whole process can take quite a bit of time as you can imagine so I'd really like to give some feedback to the user in the form of an animated preloader. There's a lot of info online with regards to preloaders but I'm not really sure how or where I should do it.
Just to give some more detail, I have far too much code to try to post here but the exact layout is as follows.
HTML form with checkboxes, SQL insert statement. Once the data has been inserted I use header('Location: x.php') to redirect to:
...the file with a series of SQL statements which generates an array with a bunch of values from the database. I send that array of values into:
...a function in another file that calls at least two APIs (Yelp) and prints the results in a loop.
Any help at all would be great - am I even going about this whole process in the best way?
Thanks
You should not have to change anything on the server side (.php files). All you need to do to achieve this is implementing AJAX with JavaScript on the client side ie. HTML/JS.
Below is an example to doing this.
<!DOCTYPE html>
<html>
<head>
<style>
.hide { display: none; }
</style>
</head>
<body>
<form>
<input type="submit">
</form>
<div class="loading hide"><svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg></div>
<div id="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
(function($, window, document) {
$("form").on("submit", function(e) {
e.preventDefault();
$("input[type=submit]").prop("disabled", true);
$(".loading").removeClass("hide");
$.get("submit.php", function(e) {
$(".loading").addClass("hide");
$("#result").html(e);
});
});
})(jQuery, window, document);
</script>
</body>
</html>
<?php
sleep(5);
header('Location: x.php');
<?php
sleep(3);
$arr = [];
for ($i=0; $i<1000; $i++) {
$arr[] = [
rand()
];
}
echo "<pre>";
var_dump($arr);
echo "</pre>";