title: CSS styles not applying immediately when class toggled with jQuery
body: <p>I am trying to change the style of an element while some javascript is running in the background, to indicate that the page is 'busy' or 'loading'. I've been attempting to do this by toggling a class on at the start of the JS script with jQuery's <code>.toggleClass()</code>, and toggling it off at the end, with some suitable CSS styling attached to the class.</p>
  
  <p>Although the class is toggled immediately, the CSS styling attached to it doesn't apply until after the JS has finished executing, however. So if the class is toggled both on and off, the user does not see any change in style.</p>
  
  <p>I've included a simple example below. How can I force the change in CSS styling to apply immediately, before the rest of the JS code executes?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('#box').click(function() {
  
      // Toggle class 'red' on.
      $(this).toggleClass('red');
  
      // Do something that takes time.
      for (i = 0; i &lt; 10000; i++) {
        console.log(i);
      }
  
      // Toggle class 'red' off.
      $(this).toggleClass('red');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    margin: 15px;
    text-align: center;
    color: #000;
  }
  
  #box {
    margin: 15px 0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    cursor: pointer;
    background: #ccc;
    border: solid 3px #ccc;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
  }
  
  #box.red {
    background: #f43059;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    &lt;div id="box"&gt;Click me.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>