0

I have Form and this form is for sending mails. On click of button it takes 5-10 seconds to send( it does many other options at same time thats why 5-10 seconds ) and on success of all conditions it shows text. I need to run loading gif between this pause and make background disable to change( or maybe blur effect ).

P.S. It is not dublicate I read many topics, but could not find my condition.

Orik3ll0
  • 43
  • 1
  • 5
  • 11
  • So what you want is that when someone clicks the button, you want a loading animation and a background effect. Correct? if so did you take a look at http://stackoverflow.com/questions/27026323/show-loading-gif-after-clicking-form-submit-using-jquery ? – Carsten Løvbo Andersen May 01 '17 at 07:58

1 Answers1

1

Simply You can use gif image in your code and on click of button, show your image

$("#button").click(function() {
    $(".container").css("opacity", 0.2);
    $("#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(){
                $(".container").css("opacity", 1);
         $("#loading-img").css({"display": "none"});
   },3000);        
});
#loading-img {
 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>
Mostafa Sabeghi
  • 300
  • 3
  • 11