How to add a loading gif to this popup, then remove it?
<p>These are really basic questions. I am tired of waiting for my website designer to fix this. It can't be that hard... I got this far by reading related questions, but I need help getting this last part done.</p>

<p>I want to display a loading gif in the center of the pop-up.</p>

<p>I want to use a gif similar to <a href="http://loadinggif.com/images/image-selection/29.gif" rel="nofollow">http://loadinggif.com/images/image-selection/29.gif</a> but with a background that will match the message-pop-up CSS shown below (semi-transparent black).</p>

<p>I want the gif to be centered in the pop-up.</p>

<p>Most importantly, I want to remove the loading gif and display a "finished" text message after the slow function completes.</p>

<p>I believe the code below is enough, but if not, I will edit the question to add more info.</p>

<p>CSS:</p>

<pre><code>.message-pop-up{position: fixed;width: 60%; top: 10%; height: 80%; text-align: center; background: rgba(0,0,0,0.7); color: #fff; z-index: 9999; margin: 0 auto; left: 0; right: 0;display: none;}
</code></pre>

<p>jQuery:</p>

<pre><code>$('.form1').submit(function(event) {
  $('.message-pop-up').show();
  $('.popup-text').html("Just a moment please...");
  //show loading gif (how?)
    // ...do some stuff that takes time...
  //hide loading gif (how?)
  $('.popup-text').html("");
  $('.popup-text').append("Finished!");
});

$('.pop-close').click(function(event) {
  $('.message-pop-up').hide();
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="message-pop-up"&gt;
    &lt;p class="pop-close"&gt;x&lt;/p&gt;
    &lt;p class="popup-text"&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>