spin.js jquery not working

Question

I'm trying to use this: http://fgnass.github.io/spin.js/ and it works fine when I just use it via the js they specify. However, when I want to use the jquery plug in, it doesn't work. Don't I only need to do $('#elementID').spin() and it should start a spinner on that element?

EDIT:

In the jquery plugin it says this:

$('#el').spin(); // Creates a default Spinner using the text color of #el.

This is what I want to use. The regular js way that people have answered below does work, but I don't know why this jquery way isn't working as they specify.

Answer 1

If you do not want to install a function in JQuery, you can simply use the element of the query.

new Spinner().spin($('#foo')[0]);

Answer 2

fiddle Demo

jQuery Plugin

/*
You can now create a spinner using any of the variants below:

$("#el").spin(); // Produces default Spinner using the text color of #el.
$("#el").spin("small"); // Produces a 'small' Spinner using the text color of #el.
$("#el").spin("large", "white"); // Produces a 'large' Spinner in white (or any valid CSS color).
$("#el").spin({ ... }); // Produces a Spinner using your custom settings.

$("#el").spin(false); // Kills the spinner.

*/
(function ($) {
    $.fn.spin = function (opts, color) {
        var presets = {
            "tiny": {
                lines: 8,
                length: 2,
                width: 2,
                radius: 3
            },
                "small": {
                lines: 8,
                length: 4,
                width: 3,
                radius: 5
            },
                "large": {
                lines: 10,
                length: 8,
                width: 4,
                radius: 8
            }
        };
        if (Spinner) {
            return this.each(function () {
                var $this = $(this),
                    data = $this.data();

                if (data.spinner) {
                    data.spinner.stop();
                    delete data.spinner;
                }
                if (opts !== false) {
                    if (typeof opts === "string") {
                        if (opts in presets) {
                            opts = presets[opts];
                        } else {
                            opts = {};
                        }
                        if (color) {
                            opts.color = color;
                        }
                    }
                    data.spinner = new Spinner($.extend({
                        color: $this.css('color')
                    }, opts)).spin(this);
                }
            });
        } else {
            throw "Spinner class not available.";
        }
    };
})(jQuery);

---

You also need to include Spin.js

---

$('#foo').spin();