<p>I'd like to indicate to the user of a web app that a long-running task is being performed.  Once upon a time, this concept would have been communicated to the user by displaying an hourglass. Nowadays, it seems to be an animated spinning circle. (e.g., when you are loading a new tab in Firefox, or booting in Mac OS X. Coincidentally, the overflowing stack in the stackoverflow logo looks like one quarter of the circle).</p>

<p>Is there a simple way to create this effect using Javascript (in particular, JQuery)? Ideally, I'd like to have one of these little spinners as elements in a table, to indicate to the user that the system is still active in processing a pending task (i.e., it hasn't forgotten or crashed). (Of course, I realize it's possible that the back-end has crashed and the front-end still show as an animating spinning thing, it's more for the psychological purpose of the user seeing activity).</p>

<p>And what do you call that spinning thing, anyways?</p>

[{'answer_id': 41166, 'author': 'helloandre', 'author_id': 50, 'author_profile': 'https://Stackoverflow.com/users/50', 'pm_score': 3, 'selected': False, 'text': '<p>this site will do it for you:</p>\n\n<p><a href="http://www.ajaxload.info/" rel="noreferrer">ajaxload</a></p>\n\n<p>and on OS X it\'s called the "Beachball" and I like to add "Of Death".</p>\n'}, {'answer_id': 41171, 'author': 'Rob', 'author_id': 3542, 'author_profile': 'https://Stackoverflow.com/users/3542', 'pm_score': 2, 'selected': False, 'text': '<p>I assume you meant something to indicate background activity during an Ajax call.</p>\n\n<p>I tend to have a CSS class which sets the background image to a little animated GIF, with appropriate padding and positioning (remember to turn background-repeat off), and then add and remove that class using a couple of JavaScript helpers called when the Ajax call is started, and when the response callback runs.</p>\n'}, {'answer_id': 41173, 'author': 'rp.', 'author_id': 2536, 'author_profile': 'https://Stackoverflow.com/users/2536', 'pm_score': 5, 'selected': True, 'text': '<p>Google <strong>Ajax activity indicator</strong> to find lots of images and image generators (the "spinning" image itself is an animated GIF). </p>\n\n<p>Here is <a href="http://www.ajaxload.info/" rel="nofollow noreferrer">one link</a> to get you started.</p>\n\n<p>With the image in hand, use JQuery to toggle the visibility of the image (or perhaps its parent DIV tag). See <a href="http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/" rel="nofollow noreferrer">this link</a> for some more info.</p>\n\n<p>rp</p>\n'}, {'answer_id': 11737476, 'author': 'Neek', 'author_id': 141801, 'author_profile': 'https://Stackoverflow.com/users/141801', 'pm_score': 2, 'selected': False, 'text': '<p><a href="http://preloaders.net/en/letters_numbers_words" rel="nofollow">http://preloaders.net/en/letters_numbers_words</a> is nice and has lots of categories down the left hand menu that offer more than <a href="http://ajaxload.info" rel="nofollow">http://ajaxload.info</a> does, plus options of size and background... ajaxload is looking pretty outdated these days.</p>\n'}]
['https://Stackoverflow.com/questions/41162', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/742/']