Loading svg/gif on ajax get request

Okay so i have a shuffle button that shuffle through a db to get videos, i would like to add a loading gif to the get ajax request

How can i do this? at the moment in the top of the featured.php i have just added a div with a svg background, but this dont seem to be the correct way to do it.

I would like the svg to load when the get request are activated and stop the svg when the request is complete?

Also is SVG gonna be removed? i get a message about this in my console log

<div class="feavidwrap col-lg-9">
<div class="feawrap">
<div id="shuffle" class="embed-responsive featured">
<?php
require_once('partials/featured.php');
?>
</div>
</div>
</div>



<script>
function Ajax(){
var xmlHttp;
    try{    
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==3){
        document.getElementById('shuffle').innerHTML=xmlHttp.responseText;
    }
}
xmlHttp.open("GET","partials/featured.php",true);
xmlHttp.send(null);
}
</script>

You’ve already got code that fires when the submission starts and ends, add a loading spinner as an <img id="loading-spinner" src="spinner.gif"> and show and hide it in these places.

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==3){
        document.getElementById('shuffle').innerHTML=xmlHttp.responseText;
        // Hide spinner
        document.getElementById('loading-spinner').style.display = 'none';
    }
}

xmlHttp.send(null);
// Show spinner
document.getElementById('loading-spinner').style.display = 'block';

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.