I'm trying to use this: .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.

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.

• javascript
• jquery
• spinner

• Do you mean linking it externally (a link to a website where they're hosting the spin.js file), VS having the script linked locally? – Pippin Commented Nov 30, 2013 at 1:30
• Oh no. I have the jquery.spin.js file and the spin.js files locally and when I look at my page source I can see that it finds them. Just that the jquery way of starting a spinner doens't work. If I do it the pure js way like they specify, it works – user1529956 Commented Nov 30, 2013 at 1:36
• Yes, that works. But that isn't what they specify in the jquery plugin. See my edit – user1529956 Commented Nov 30, 2013 at 1:40
• Works for me: jsfiddle/eShsS/70 Are you loading both the spin.js and the plugin? – Mark Commented Nov 30, 2013 at 1:43
• hmm this is very weird. The same code doesn't work in my app. I guess I'll have to track down the problem – user1529956 Commented Nov 30, 2013 at 1:49

2 Answers 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();

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]);