title: basic loader spinner inside php during call to remote server
body: <p>I want to add a loading spinner while my remote script is running and my frontend page is in "waiting for ..." state. 
  I only have 1 php page and one CSS . ( for the moment still in tests so I have not split script page and html page yet). </p>
  
  <p>I have the following css for the loader :</p>
  
  <p><strong>Style.css edited to replace the "." with "#"</strong> </p>
  
  <pre><code>#loader {
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  </code></pre>
  
  <p>My page looks like this ( after cleaning it ) :
  <strong>EDIT</strong> with webbm comments</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt; BETA APP HOME PAGE &lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="CSS/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="loader"&gt;&lt;/div&gt;
  
  &lt;?php
  if (isset($_POST['STARTVISUREC']))
  {
  
     echo '&lt;script&gt;console.log("End loader spinner")&lt;/script&gt;';
  // making appearing the spinner before the call to remote server. 
      echo '&lt;script language="javascript"&gt;';
      echo 'document.getElementById("loader").style.display="inline"';
      echo '&lt;/script&gt;';
  
  // calling remote APP in BE server. 
  $remotstarter = file_get_contents('http://192.168.56.154/WEBAPP/wa_start.php');
  
     echo '&lt;script&gt;console.log("End loader spinner")&lt;/script&gt;';
  // making disappearing the spinner after the call to remote is finished. 
      echo '&lt;script language="javascript"&gt;';
      echo 'document.getElementById("loader").style.display="hidden"';
      echo '&lt;/script&gt;';
  
  }
  if (isset($_POST['STARTFACEREC']))
  {
  // calling local script for other usage. 
  shell_exec("sudo python  AppPy/cgi-bin/test.py");
  echo("Off");
  }
  ?&gt;
  
  &lt;form method="post"&gt;
  &lt;button name="STARTVISUREC"&gt;START VISU REC&lt;/button&gt;&amp;nbsp;
  &lt;button name="STARTFACEREC"&gt;START FACE REC&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  &lt;/form&gt; 
  &lt;script&gt;
  &lt;/script&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="margin-left:15%;padding:1px 16px;height:10px;"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>still not OK The loading spinner is not appearing </p>