Show loading animation on button click

Question

I want to do something very simple  I have one button in my page    lt form action   process  method  POST  gt      lt input class  btn btn-large btn-primary  type  submit  value  Analyze Topics  gt       lt  form gt    Now what I want is when the user presses this submit button  It shows that  loading  gif animation until it gets the response from server   But I have been struggling since long time   How do I implement this

User · Answer

I know this a very much late reply but I saw this query recently And found a working scenario,

OnClick of Submit use the below code:

 $('#Submit').click(function ()
 { $(this).html('<img src="icon-loading.gif" />'); // A GIF Image of Your choice
 return false });

To Stop the Gif use the below code:

$('#Submit').ajaxStop();

User · Answer

If you are using ajax then  making it as simple as possible    Add your loading gif image to html and make it hidden  using style in html itself now  you can add it to separate CSS     lt img src  path to loading gif  id  img  style  display none    gt   Show the image when button is clicked and hide it again on success function      buttonID   click function          img   show       lt ----here     ajax               success function result              img   hide        lt --- hide again           Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails

User · Answer

btnId   click function e         e preventDefault            ajax                       beforeSend   function xhr  opts                 show loading gif                    success  function                        complete   function                  remove loading gif

User · Answer

try       btnId   click function e    e preventDefault       show loading gif     ajax           success function data        remove gif        error function     remove gif              EDIT  after reading the comments   in case you decide against ajax      btnId   click function e        e preventDefault           show loading gif        this  closest  form   submit

User · Answer

The best loading and blocking that particular div for ajax call until it succeeded is Blockui  go through this link http   www malsup com jquery block  element  example usage     lt span class  no-display smallLoader  gt  lt img src   images loader-small png    gt  lt  span gt    script  jQuery ajax        url  site path   restaurantlist addtocart    type   POST    success  function  data       jQuery   id   unblock        beforeSend function  data       jQuery   id   block        message  jQuery   smallLoader   html         css              border   none             backgroundColor   none             overlayCSS    backgroundColor    afafaf                      hope this helps really it is very interactive

User · Answer

do processing               this  attr  label     this  text    text  loading        animate   disabled  true    1000  function                        original event call                   when   elm  delay 1000  one  click    done function       processing finalized                       this  text   this  attr  label    animate   disabled  false    1000  function

[jquery] Show "loading" animation on button click

Examples related to jquery

Examples related to html

Examples related to css

Examples related to ajax