Bu açılır pencereye bir yükleme gifi nasıl eklenir?

Question

Bunlar gerçekten temel sorular. Web tasarımcımın bunu düzeltmesini beklemekten yoruldum. Bu o kadar zor olamaz ... Bu konuyla ilgili soruları okuyarak bu kadar uzağa vardım, ama bu son kısmı yapmam için yardıma ihtiyacım var.

Pop-up'ın ortasında bir yükleme gif'i görüntülemek istiyorum.

http://loadinggif.com/images/image-selection/29.gif'a benzer bir gif kullanmak istiyorum, ancak aşağıda gösterilen mesaj-pop-up CSS (yarı saydam siyah) ile eşleşen bir arka plan ile.

Gif'in pop-up'da ortalanmasını istiyorum.

Daha da önemlisi, yavaşlama tamamlandıktan sonra yükleme gifini kaldırmak ve "bitmiş" metin mesajı görüntülemek istiyorum.

Aşağıdaki kodun yeterli olduğuna inanıyorum, ancak, daha fazla bilgi eklemek için bu soruyu düzenleyeceğim.

CSS:

.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;} 

jQuery:

$('.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(); 
}); 

HTML:

<div class="message-pop-up"> 
    <p class="pop-close">x</p> 
    <p class="popup-text"></p> 
</div> 

Answer 1

HTML -

<div class="message-pop-up"> 
    <p class="pop-close">x</p> 
    <p class="popup-text"></p> 
    <div class="popup-loader-img"></div> 
</div> 

CSS -

.popup-loader-img{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(' http://loadinggif.com/images/image-selection/29.gif '); 
    background-position: 50% 50%; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

Bunu test etmedim. Bu yardımcı olur umarım.