Turn a button into a loading circle animation

I would like to reproduce the animation below :


I found this but i would not have the progress bar (the loading time will not be defined) :


How can I do it ?


You can add an event listener to temporarily replace it with an image and then have the callback of the ajax (or whatever happens) perform a replacement of it. In my example, I just used setTimeout to have it replace the button again after 3 seconds. Normally that functionality would go inside of the ajax callback (or whatever else it was waiting on):

Here's a jsFiddle example: https://jsfiddle.net/jetweedy/m0qpm1xh/2/

var myButton = document.getElementById('myButton');
var myParent = document.getElementById('myParent');
myButton.onclick = function() {
var myImage = document.createElement("img");
myImage.src = "http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedCircle.gif";
setTimeout(function() {
}, 3000);

An alternative would be to write some JavaScript to gradually decrease/increase its size, position, color, and other properties while it processes whatever it's processing, and then (again, inside the callback) put a stop to all that (by ending a setInterval that you had initiated) after you're done.

Category:javascript Time:2018-11-03 Views:0

Related post

  • Loading circle animation in iphone 2009-12-04

    How can I display the loading screen animation in iphone? I mean the bars arranged in circles. So that I can use it while some of the part of my app is loading, like initializing. Or should I create may own animation loading? Thanks. --------------So

  • Turning a button into a jQuery UI icon? 2011-03-20

    How would I turn this button: <%= button_to "+1", video_votes_path( :video_id => video.id, :type => "up" ), :remote => true %> into an icon provided by jQuery UI? I tried adding the class to it: <%= button_to "+1", video_votes_path(

  • Turning a Link Into a Little Circle With CSS 2011-05-28

    I have the following html code: <ul class="smenu"> <li class="smenuitem"><a href="http://ux.stackexchange.com/"></a></li> <li class="smenuitem"><a href="http://area51.stackexchange.com/"></a></li>

  • Turn a button to a link with the same exact functionality 2011-03-20

    So I have this button: <%= button_to "+1", video_votes_path( :video_id => video.id, :type => "up" ), :remote => true %> It calls the create method in the video_votes controller, and also sets params[:type]. I want to turn this button i

  • Draw loading circle on windows form 2011-06-08

    How can I draw a loading circle(animated) on windows forms? Is it possible to make it big and transparent, so that underlying text on form is still visible. Displaying a gif is not a kind of solution i'm looking for. Thx. --------------Solutions-----

  • Turn square image into round rect button with shine [Objective C] 2010-08-16

    In this picture you will see several TV show images that have been put into a rounded rect button with the same gloss/shine that an iphone app button usually has. In one of the icons you even see a ribbon saying "On air". I'm wondering; how do you re

  • Adding onclick property to an ImageButton in the parent page from JS function called from button inside page loaded into FancyBox 2010-11-12

    I am using "FancyBox" in ASP.NET User Control (inside a Content Page). I want that a click(client side click) on a button 'placed on the page loaded into the FancyBox ,will call a JavaScript function, and in that function I want to enable a ImageButt

  • How would I turn one image into an entire set of buttons? 2012-02-07

    In my case I have a map of the office I'm in now, I'd like to make it to where when I click on each different room the appropriate event (routine, etc.) happens. I imagine it's possible but I've only ever seen (here and elsewhere) turning an image in

  • How to show Hibernate option into turn off buttons? 2013-12-26

    my computer don't have this. Please tell me How to show Hibernate option into turn off buttons ! Thanks ! --------------Solutions------------- You may also find that clicking Start, Settings, Control Panel, Power Options - the Hibernate tab is missin

  • windows xp went into standby mode as I was typing. The turn on button will not budge 2014-03-24

    The turn on button will not budge. I was typing on my windows xp laptop and it went into standby and shut down. I tried clicking on the turn on button and nothing happens. There was no warning and the laptop was running smoothly. --------------Soluti

  • Add loading circle to JTable 2012-02-13

    I have a JTable which loads data from database. Because sometimes the data is too long, ti takes some time to load all the data. What I would like to do is add a loading circle inside the Jtable to notify the user that data is being loaded into the J

  • Windows 8 home button is forever loading 2014-04-03

    On the bottom left corner there is the Start button which brings me back and forth the apps screen and the desktop. To its right, there's a button, with a home icon in circle, which has always been loading. As in, when I mouse over the icon wanting t

  • blue waiting/loading circle beside my cursor in Windows 7 2014-08-08

    Original Title :Cursor..blue circle? Since this morning the blue waiting/loading circle beside my cursor in Windows 7 is on as much as it is off. This is very annoying while typing or playing games.The only thing changed is an HP printer/all in one a

  • Loading circle next to cursor keeps flashing??? 2014-09-19

    I have read the other threads concerning this issue and none of their solutions work. I have done a clean boot and I really think it is my anti virus program that is causing this. However, I can't just stop the anti virus program because of obvious r

  • how to add a button into QLPreviewController 2011-06-27

    Is it possible to add a new button into the toolBar or into the actionButton on the right top of QLpreviewController? If yes, how i write the code? --------------Solutions------------- Although QLPreviewController is a subclass of UIViewController ch

  • How To Change Value of Input Button after it loads up in DOM using jQuery 2011-08-24

    I have this telerik button with class name ruButton & ruBrowse, that loads up a little late into the DOM. I am trying to change the Value of the button at page Load. The Code below does not work at page load, but does work if attached to another

  • 'Loading circle' or 'busy label' for Swing? 2009-07-09

    I've used this 'LoadingCircle' project in .net applications. Is there an equivalent component that provides a loading circle for Swing? Are there any other loading indicators available for Swing. --------------Solutions------------- SwingLabs has a J

  • Arc / Circle animation in iphone 2009-07-23

    How would I animate a circle on the iPhone so that the arc starts at "0 degrees" and ends at "360 degrees"? Advance Thanks, Sat --------------Solutions------------- You need to read the Quartz 2D Programming Guide's section on arcs. (I am assuming yo

  • Turning nested JSON into an HTML nested list with Javascript 2009-07-31

    I'm fairly new to using JSON (as opposed to XML) and am currently working purely with Javascript to digest, parse and display my returned JSON data. I'm using the JSON2.js library and am getting back some valid JSON data representing a fairly simple

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 1.581 (s). 14 q(s)