4

I am just looking for a bit of instruction really. I am very new to JQuery, so it's all a bit hazy.
However, I have a form "processing" div that shows somewhat when a form has been submitted.

At the moment I have a simple div with a animated gif to visually show its sending.

<div id="loading">Please wait, your news is being submitted...
<img src="/-/images/addwalk-loader.gif"/>

Ideally, I would like to replace the animated gif with a spinner created through spin.js, as I am aware that animated gifs do not continue to animate on IE once the form has been sent.

The only problem is, looking through the documentation, I am a bit unsure as to how I would implement it. Any pointers would be greatly appreciated! Thanks!

Community
  • 1
  • 1
shorn
  • 1,327
  • 5
  • 15
  • 20

3 Answers3

8

If don't want to spin a current object as noted by Janus, you could instead create a new Spinner object and then position it on the page wherever you want it to be. For a list of options just check the docs!

Example:

var opts = {
   color: '#000'
   //etc etc
};
var spinner = new Spinner(opts).spin();
$("#loading").appendChild(spinner.el);

Heres a fiddle with it working: http://jsfiddle.net/vasco/6Ca8Y/

vascop
  • 4,972
  • 4
  • 37
  • 50
  • So would I call the script like I do my jQuery, and then add this to my jQuery file? Sorry Im probably sounding very useless, but I'm just not quite sure! – shorn Mar 31 '12 at 12:14
  • @shorn I updated the answer with a fiddle with a working example. – vascop Mar 31 '12 at 12:48
  • Ahh excellent! I haven't got time at the moment to try it out, but I think I should be able to work it out now. I'll message back once I've had a go tonight! Thanks! – shorn Mar 31 '12 at 13:11
  • Example above should be .append instead of .appendChild – Sam T May 08 '14 at 17:20
3

It's really quite easy. You call .spin() on the JQuery object that should spin. Call .spin(false) when you want it to stop.

I used it myself here.

Janus Troelsen
  • 20,267
  • 14
  • 135
  • 196
1

I found another plugin Activity Indicator which have more options to customize and easy to integrate. Have a try :|

Developer-Sid
  • 1,372
  • 11
  • 9