Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show "loading" animation on button click

I want to do something very simple. I have one button in my page.

<form action="/process" method="POST">    <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>     </form> 

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?

like image 394
frazman Avatar asked Mar 08 '13 06:03

frazman


People also ask

How to loading buttons in HTML?

How TO - Loading Buttons Step 1) Add HTML: Add an icon library, such as Font Awesome, and append icons to HTML buttons: Example <!-- Add icon... Step 2) Add CSS: Example /* Style buttons */ .buttonload { background-color: #4CAF50; /* Green background */ border:... W3.CSS Tutorial

How to add loaders to your own style of buttons?

Customize and generate your own css buttons that support loading effect. use loading.css to easily add loaders with your own style Loading Buttons contains only CSS. no dependency on JavaScript.

How to give feedback on Submit button with built-in loading indicator?

This cool code snippet by Elior Shalev Tabeka gives user direct feedback upon submit button with built-in loading indicator. When you click on the animated go button, that changes its background colour upon hovering, will transform into loading indicator and then to a success button with a green background.

How to change size of loader animation?

You can use any animations for the loader element to customize your own loader animation, if you keep the size of loader element 1em in both width and height. Following example use a rotating disk GIF: If you want to adjust the size of your loader, you have to put your loader inside ld element, and use font-size style to change it size:


2 Answers

If you are using ajax then (making it as simple as possible)

  1. Add your loading gif image to html and make it hidden (using style in html itself now, you can add it to separate CSS):

    <img src="path\to\loading\gif" id="img" style="display:none"/ > 
  2. Show the image when button is clicked and hide it again on success function

    $('#buttonID').click(function(){   $('#img').show(); //<----here   $.ajax({     ....    success:function(result){        $('#img').hide();  //<--- hide again    } } 

Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails.

like image 84
bipen Avatar answered Sep 23 '22 15:09

bipen


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(); }); 
like image 38
Dakait Avatar answered Sep 19 '22 15:09

Dakait