Zeige laden gif beim Klicken auf die Schaltfläche auf Hover

Question

Ich habe Formular und dieses Formular ist für das Senden von Mails. Auf Knopfdruck dauert es 5-10 Sekunden (es tut viele andere Optionen gleichzeitig, warum 5-10 Sekunden) und auf Erfolg aller Bedingungen zeigt es Text. Ich muss Lade Gif zwischen dieser Pause laufen lassen und Hintergrund deaktivieren, um zu ändern (oder möglicherweise Unschärfe-Effekt).

P.S. Es ist kein Duplikat, ich lese viele Themen, konnte aber meinen Zustand nicht finden.

Answer 1

einfach können Sie GIF-Bild in Ihrem Code verwenden und auf Schaltfläche anklickt, zeigen Ihr Bild

$("#button").click(function() { 
 
    $(".container").css("opacity", 0.2); 
 
    \t $("#loading-img").css({"display": "block"}); 
 
    
 
    //here palce your code 
 
    
 
    //i set timeout that you can view the change 
 
    //you must use below code without setTimeout function 
 
    setTimeout(function(){ 
 
    \t    $(".container").css("opacity", 1); 
 
    \t \t  $("#loading-img").css({"display": "none"}); 
 
    \t \t },3000);   
 
});

#loading-img { 
 
\t background: url("http://www.chimply.com/images/samples/classic-spinner/animatedEllipse.gif") center center no-repeat; 
 
    display: none; 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    top: 33%; 
 
    left: 1%; 
 
    right: 1%; 
 
    margin: auto; 
 
} 
 
.container{ 
 
    height: 150px; 
 
    background: #000; 
 
    color: #fff; 
 
} 
 
.group { 
 
    position: relative; 
 
    width: 70%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="group"> 
 
    <div class="container">container</div> 
 
    <div id="loading-img"></div> 
 
    <button id="button">Submit</button> 
 
</div>