How to use spin.js instead of a animated gif

Question

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!

Answer 1

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/