title: CSS display attribute is set but not visible while code is running
body: <p>I'm trying to make a CSS Rotator(Loader) visible after pressing a button. Then processing something and afterwards hiding the Rotator. But it seems that while processing the display:block atribute is set
  but not visible (See console logs). How could I archive this? Thank you for your help! </p>
  
  <p>Simplified code example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;           
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          function test(){
  
              $('#loader').css("display","block");
  
              console.log($('#loader').css("display"));
  
              do_something();
  
              console.log($('#loader').css("display"));
  
              $('#loader').css("display","none");
  
              console.log($('#loader').css("display"));
  
          }
  
          function do_something(){
              for (var i=0; i&lt;=10E9; i++){
  
              }
          }
  
          $(document).ready(function() {
  
              $('#loader').css("display","none"); 
              $('#test_btn').click(test);
  
          }); 
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="loader"&gt;Loader&lt;/div&gt;
      &lt;button id="test_btn"&gt;test&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>