I found this on Github after a bit of digging and first thoughts were that would suit my needs but alas it does not work and does not execute the file correctly or at all as nothing is loaded into the database after an age of waiting.
I have modified the code slightly to suit my page
echo '<form method="get">';
echo ' <pre>';
echo ' <input type="button" id="load" value="show"></pre>';
echo ' <center> <h1 id="content"></h1></center>';
echo ' </form>';
and then before the
</body> tag I have
// Adding loading GIF
$('#content').html('<img id="loader-img" alt="" src="https://media1.tenor.com/images/8ac12962c05648c55ca85771f4a69b2d/tenor.gif?itemid=9212724" width="50" height="50" align="center" />');
// Ajax Request
data: "no data here XD",
success: function (data)
// This replace the retrieved data to the div after the setTimeOut function
Any clues as to where I am going wrong?