fgnass/spin.js

A spinning activity indicator

spin.js

An animated loading spinner

• No images
• No dependencies
• Highly configurable
• Resolution independent
• Uses CSS keyframe animations
• Works in all major browsers
• Includes TypeScript definitions
• Distributed as a native ES6 module
• MIT License

Installation

npm install spin.js

Usage

CSS

<link rel="stylesheet" href="node_modules/spin.js/spin.css">

TypeScript or JavaScript

import {Spinner} from 'spin.js';

var target = document.getElementById('foo');
new Spinner({color:'#fff', lines: 12}).spin(target);

For an interactive demo and a list of all supported options please refer to the project's homepage.

spin.js's Issues

Show spinner at center of screen

I want to show the spinner at the middle of screen and not at the center of other elements. When I use the body but it creates scrollbars.
How could I do that?

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

When i load spin.js on demand like like this:

load_script = (src, callback) ->
  script = document.createElement("script")
  script.setAttribute "type", "text/javascript"
  script.setAttribute "src", src
  script.onload = callback

if get an Exception in Chrome

Uncaught Error:  HIERARCHY_REQUEST_ERR: DOM Exception 3 in spin.js:68
(anonymous function)spin.js:75
(anonymous function)spin.js:294

Right to Left Language Issue

Trying to use on a site that supports right-to-left languages and the automatic positioning is a bit off.

To fix I am just setting the 'left' to be a negative value of what it should be. Not sure what the 'real' fix could be or if one is really needed. However it would be nice to just use the default centering. I can get into the code more if I have time.

if ($("html").attr("dir")==='rtl') {                                        
           //Flip the spinner for RTL languages
           spinner = new Spinner({ left: -301, top: 50 }).spin($("#scheduling-results")[0]);
}else{                                                                    
           spinner = new Spinner({ left: 301, top: 50 }).spin($("#scheduling-results")[0]);
} 

I made a jQuery plugin that merges your options into the defaults

The jQuery plugin example on the site requires you to pass in options in an object literal. This plugin will allow you to merge in those options and override only the default properties you need to change.

https://gist.github.com/2050500

Stuck on spots when using 10 lines

Hi,

Neat project! While I was playing with the example widget, I noticed that if you set the number of lines to 10 and the speed to either 0.7 or 0.6, one of the line segments gets stuck on.

Here's a screenshot: http://imgur.com/dbXfX.png

spin.js on bpm does not work

see:

bpm/bpm#89

not sure whether its spin's or bpm's fault

Spinner Animation stopping on DOM change

Hi! Beautiful little plugin you got here and a nice website too. I had a question regarding spin.js on IE 7.
I'm working on a page that basically has three divs(div1, div2 and spinnerdiv).

Only div 1 or div 2 is visible at one point. I want the spinnerdiv to appear as this switch is happening because there is some processing being done. I can see the spinner in between the change in the dom, but in the time the spinner is on screen, it appears stuck, as in, no animation going on. Any idea on how to solve this?

Thanks,
Xavier

Edit 1: I just wanted to add that it works fine in Firefox 5.01.

Spinner override of default options don't appear to work in Firefox 4.0

The options don't work in FireFox 4.0. However they do work in IE and Chrome.

var spinnerOpts = {
lines: 12, // The number of lines to draw
length: 14, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#6699ff', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 67, // Afterglow percentage
shadow: false // Whether to render a shadow
};

function loadRules() {

var deskText = $('#desk option:selected').text();
var target = document.getElementById('rules');
var spinner = new Spinner(spinnerOpts).spin(target);

$('#rules').load("load.do?&desk=" + deskText);

}

security error on Firefox 7.0.x

Spin.js errors out on firefox 7.0.x , it error out on line 64 saying Security error '}', 0);

NB: I am trying to use spin.js within an iframe

Thanks
Dhaval

Not removing "data" in the jQuery version

On the project's homepage (http://fgnass.github.com/spin.js/) you provide a jQuery plugin for spin.js, but at some point there is this:

if (spinner) spinner.stop();

where, to me, it should probably be:

if (spinner) {
    spinner.stop();
    if (opt === false)
        $this.removeData('spinner');
}

otherwise the "data" stuff would remain there forever, even after the plugin has been stopped and everything else removed.

Apart from this little thing, great work!

spin() should auto stop()

If I call spin several times, I get multiple copies of the spinner, and then stop() only kills one of them. Seems like spin() should automatically stop any previous spinning.

Opacity option for background

I am really missing the backgroundOpacity: 0.7 option.

This would be veeery useful.

Example not working on iPhone

Example page not working on Safari/iPhone - reported by @chrisleeramsden on twitter... http://twitter.com/chrisleeramsden/status/104632665055039488

Consider ability to pull color from element in which spinner will be drawn

I think I’d like to be able to set the color property to auto-match whatever the text color is. Then if I wanted to customize the spinner color, it’s one CSS rule, not a configuration change.

It could also be taken further, e.g. being auto-inserted into e.g. elements with a class of .spin.

Proper jQuery plugin

Hello.

I guess I have a pretty specific setup when the JS logic that I create loads externally into a 3rd party site (it is used to display a widget on a 3rd party site). I try not to use the global window.* namespace at all, because it is not mine in my case. I am also using jQuery which allows me to completely remove it from the global namespace and just keep a reference in my local variable ( with jQuery.noConflict(true) ).

Spinner by default always assigns itself to window.Spinner which is a problem for me. I've solved this so far just by passing "jQuery" instead of "window" to the main Spinner's anonymous function and thus make it add itself to jQuery.Spinner without messing much with the main Spinner's code.

This is almost fine, but I don't like that I can forget to do this change on the next Spinner update and thus break everything. If Spinner was available as a proper jQuery plugin (and thus only use the jQuery's own namespace) it would be a perfect solution.

Thanks for considering this! :)

Spinner off-center when parent div has padding

First let me say thanks for making this cool spinner widget, very cool :)

I added padding to the target div where the spinner renders and the horizontal coordinates are off making it off center.

Using Chrome browser.

Allow control of shadow

Sometimes I may want to tone down the shadow, or use a white-inset shadow. As an improvement, allow us to control the shadow.

Occasionally causes a strobe effect in Chrome and Safari

Occasionally when stopping or starting the spinner, the entire browser will briefly flash a different color (blue, I think), and then flash back. You can replicate this by creating a spinner in the inspector and calling spinner.spin(document.body) and then spinner.stop() This doesn't happen every time to start or stop the spinner, but it happens frequently enough that you should be able to replicate quickly.

I'm using Chrome 16 and I've heard of people seeing the same thing on recent versions of Safari.

Any ideas what might be doing this?

Convert single .js into a ie and non-ie .js

The advantage here is that we can write a conditional IE statement asking for IE <=8 to render the js with IE specific code, and IE > 8, ff, opera, safari, chrome to render the other file. Even more bytes saved (about 70 lines).

Security error if last stylesheet is different domain

Hi,

The issue is with this line:

var sheet = document.styleSheets[document.styleSheets.length - 1];

If the last stylesheet is not on the same domain it throws a security error, for instance I was loading a google font at the bottom of the page:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato">

The sheet selection needs to be more intelligent by selecting the stylesheet that it just created rather than just the last one in the document.

Thanks.

Only half of spinner is visible in IE8

Very strange bug.
On your page http://fgnass.github.com/spin.js/ - spinner displayed perfectly.
But on my simplest test page - I see only a right half of spinner.
Screenshot: http://dl.dropbox.com/u/948356/spinner_bug_in_IE8.png

IE version: 8.0.7601.17514 (on Windows7 32bit)

Test page code:

<html>
<head>
  <title></title>
</head>
<body>

<div id="preview" style="width:200px; height:200px">
</div>

<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.min.js"></script>
<script>
    var opts = {
      lines: 10, // The number of lines to draw
      length: 7, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      color: '#000', // #rbg or #rrggbb
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false // Whether to render a shadow
    };
    var target = document.getElementById('preview');
    var spinner = new Spinner(opts).spin(target);   
</script>
</body>
</html>

Show and hide and then show it again gives js error

Show the spinner and then hide it is not a problem one time, but when i try to add it again after hide it, its gives some javascript errror.

I using spin.js right now and the jquery plugin i have added to a own js file.

The JS Error:

el is undefined
Line 187

in spin.js i have it is this line:

if (el[parentNode]) el[parentNode].removeChild(el);

I using the jquery plugin to start it:

var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 2, // The line thickness
  radius: 10, // The radius of the inner circle
  color: '#000', // #rbg or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true // Whether to render a shadow
};

$('#loadingSpinner').spin(opts);

and to remove it:

$('#loadingSpinner').spin(false);

Do i do anything wrong or is it a bug?

Animate between two colors

Right now you can pick 1 color, and it just animates the opacity of that. What if it were to animate between two colors? Right now I have a spinner in .gif form that goes from white to black. On a white background, and setting the color to black, it looks almost to my .gif. On a black background, the spinner is invisible. I'd love to specify a to and from rgba. If we had that, you could still specify rgba(0,0,0,0) to rgba(0,0,0,1) or rgba(255,255,255,0) to rgba(255,255,255,1) to get what we're used to now. I'd like to go from opaque black to opaque white. How feasible would this be?

To clarify, here's the two images I'm using now: http://cocodot.com/images/spinners/Spinner_cocodot_grey_matted_black.gif and http://cocodot.com/images/spinners/Spinner_cocodot_grey_matted_white.gif each with a different matte to compensate for dark or light backgrounds. Having a single spin.js usage to replace them both would be awesome.

background for the spinner

Is it possible to give spinner a background or have a grey overlay on the page when its activated? Similar background box thats shown as part of the demo page.

IE8 and below: "invalid argument"

I'm not sure if this is really a bug or not, as it suddenly appeared one day. The component was working fine on IE before. I re-copied the component code so it should be up to date and untouched.

I've run into a situation where IE7-IE8 (probably older ones also, haven't tested) return "invalid argument". With some testing it seems like the failure happens inside ins(parent, child1, child2)-function at

parent.insertBefore(child1, child2||null);

when child2 has a value other than null (on IE8). When error appears, values of the parameters (outerHTML) are for
parent (first and last gt/lt-signs removed as otherwise the example is hidden):

<roundrect style="FILTER: progId:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3); WIDTH: 11px; HEIGHT: 4px; TOP: -2px; LEFT: 10px" arcsize="1"></roundrect>

child1:

<fill opacity="0.25" color="#FFFFFF"></fill>

child2:

<stroke opacity="0"></stroke

What came to mind first was is it sure the parent contains the child2? insertBefore without the second parameter works fine.

new operator optional

What about making the new operator optional? On this point I go along with http://dmitry.baranovskiy.com/post/something-new
Anybody interested?

var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
…
};

// Box 1
Spinner(opts).spin($(".box1"));

// Box 2
Spinner(opts).spin($(".box2"));

spin.js works but not spin.min.js

This is weird, when I include the spin.js file everything is fine but when I want to use the minified version I get: Error, undefined is not a function. I'm just copy-pasting source codes above my codes, nothing changes, but somehow the minified version fails.

Allow specification of 2nd color

Right now you can specify the "on" color, but it always fades to the same "off" color: transparent. I would like to be able to specify the "off" color, so I can make a spinner that for instance fades from #ccc to #333, and will therefore be visible over a wide variety of backgrounds (without having to use a shadow).

Spin does not appear with Modernizr (html5shiv)

Hi, I love spin.js.

I used spin.js in my project and found that it has trouble with Modernizr.
http://www.modernizr.com/download/

When I use spin.js with Modernizr's html5shiv v3.4, spin did not appear on IE8 at all.
Without html5shiv, it had no trouble.

This seems a problem about html5shiv; but this seems a common pitfall for many people; so I just wanted tell you this.

Options Hash Generation

It would be SO killer if, when I was adjusting the options for the demo spinner on the Github page, I could hit a button to show me the options hash so I could copy that STRAIGHT into my JS file.

mobile-theme

Hi, is there a way i can download the source for the spine mobile theme?

no animation in Chrome15/mac

Using Chrome 15.0.874.5 dev on Mac OS X 10.7.1 I don't see any animation on http://fgnass.github.com/spin.js/

It works find in Safari and Opera

It's a throbber, not a spinner

That's not a spinner. It's a throbber. http://en.wikipedia.org/wiki/Throbber

A spinner moves numbers up and down in an input box. http://en.wikipedia.org/wiki/Spinner_(computing)

translate3d style on lines interfering with Flash object in Chrome

Hi -- awesome plugin!

Just wanted to report that I'm seeing a Flash object disappear off-screen, and removing the translate3d style within the lines method fixes the issue. I'm assuming you're only doing this style to cue the browser to use hardware acceleration? Not sure of a fix but in my case I am just going sans-hw acceleration

For clarity, the spinner is not over the Flash object, and I am on Chrome 15 on Mac OSX 10.6.8

stop-spin chain doesn't work in IE7/8

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="spin.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var spinner = new Spinner(),
            cnt = document.getElementById('cnt');
        spinner.spin(cnt);
        $('#btn').bind('click', function(evt) {
            if (spinner.on === 1) {
                spinner.stop();
            } else {
                spinner.spin(cnt)
            }
        });
    });
    </script>
</head>
<body>
    <div id="cnt" style="width:100px;height:100px"></div>
    <button id="btn">Toggle</button>
</body>
</html>

http://jsfiddle.net/zCu6m/

When you execute a stop and then try to re-initialize the spin, the visual space is reserved but the animation is no longer executed

spin appears beneath container positioned child element

I'm placing a spin on a container that has an absolutely positioned child element.
Spin.js adds its elements as the first child of the container. If other child elements are statically positioned, spin will appear on top. If any following child elements have absolute or relative positioning, they will be on top of spin.

You can play with an example here:
http://jsfiddle.net/8w3jU/32/

I corrected this by changing the spin.js ins function to use appendChild instead of insertBefore. Then it is the last element in the container, and the DOM's natural z-order will place it on top.

It doesn"t work for me.

I tried to code the minimal example but I must have made a mistake somewhere...
This is the Usage shown on GitHub.

Here's the Javascript:

        var opts = {
            lines: 12, // The number of lines to draw
            length: 7, // The length of each line
            width: 5, // The line thickness
            radius: 10, // The radius of the inner circle
            color: '#000', // #rbg or #rrggbb
            speed: 1, // Rounds per second
            trail: 100, // Afterglow percentage
            shadow: true // Whether to render a shadow
        };
        var target = document.getElementById('spin');
        var spinner = new Spinner(opts).spin(target);

In the HTML, there's only a div with 'spin' as id.
I can't show the whole HTML here because it's interpreted by this forum, but it includes "spin.js", the above JavaScript and the div.

Could you tell me what's wrong ?
Thank you in advance !

Raphaël Barzic

Opacity

Is it possible to add 'opacity' as an option or maybe allow rgba to be used in the 'color' option.

High CPU usage compared to animated gif (tested in Chrome)

When browsing http://fgnass.github.com/spin.js/ (two throbbers) in Chrome 14-beta on a 1.7ghz i5, I get about 10% on two processes when the page is visible. When the tab is in the background, I get about 5% constant usage. Compare to http://i.imgur.com/lTi7b.gif , which takes about 2% when active and nearly 0% when not active.

I know this isn't your fault, but I think it's something to consider, since more CPU = less battery.

Does not work on mobile Safari iOS 3.1.3

I have tested this on an iPhone 3G running 3.1.3 and Safari displays the spines but the fading in and out to create the illusion of progress appears as a throbbing effect rather than spinning.

Doesn't work in IE6 despite claimed support.

Here is what the demo page displays in IE6:

Some spinner bars disappear after removing and rebinding spin()

Here's a preview of what's happening: http://i.imgur.com/STAbI.png

Basically, if I remove the div containing the spinner, and append the div again later and rebind spin(), this happens.

Z-index and position

It would be nice to be able to set some more options, like z-index or position within the element.

In my implementation, the spinner is getting hidden undereneath some elements. Or, on long pages, the spinner appears below the current viewport.

Alternatively, for the position, it would be nice if it would be vertically centered in the viewable portion of the element instead of the viewable+nonviewable portion of the element. Does that make sense? And, maybe it would make sense to set a high z-index by default?

Animation sometimes breaks after zooming or scrolling on iOS

After zooming (or scrolling) in Mobile Safari the animations sometimes loose their animation-delay, causing all lines to pulse synchronously.

Using a single rotation instead of multiple opacity animations (like http://neteye.github.com/activity-indicator.html) would fix this issue, but comes with its own drawbacks.

Other alternatives:

1. Using setTimeout() instead of CSS animations

2. Flicking through the various animation steps as in this example: http://paulbakaus.com/2010/12/15/sprite-animations-on-css-transitions-revisited/

3. Incorporate the delay into individual @keyframe rules for each line

overlapping lines w/ shadow cause bad feelings

I noticed that when the lines overlap (due to with/length/radius settings) there is an issue with the 'infinite' feeling of the spinner. it instead clearly shows the beginning/start.

I tried to capture this in an image:

note how the last line (2PM) is on TOP of both, rather than being on top of 1PM but below 3PM

of course, you can fix this with z-indexing, but i don't think that's an ideal solution.

before i take a stab at it, is there an easy way to fix it off the top of your head?

(obligatory "i like this project a lot" comment goes here!)

SCRIPT65535: Unexpected call to method or property access. spin.js, line 34 character 5

I just tried spin.js with IE 9 but I got the error (see title).

It works perfectly in FF.

I'm using jQuery but without your jQuery plugin. Is it the problem?

jQuery plugin example is missing a semicolon

The jQuery plugin example on the website should include a semicolon at the very end.

$.fn.spin = function(opts) {
  this.each(function() {
    var spinner = $(this).data('spinner');
    if (spinner) spinner.stop();
    if (opts !== false) {
      $(this).data('spinner', new Spinner(opts).spin(this));
    }
  });
  return this;
};

Is there an easy way to position the spinner on show?

I usually display the spinner after clicking on a button. I've setup the code like the following http://jsfiddle.net/LjQLY/

Right now, the spinner is on the left of the shown text. Is there a way to display the spinner on the right of the text?

Feature Request: add isSpin() to the spinner

I wish there is a method that would return true or false which would indicate if the spinner is spinning or stopped.

Thanks

IE9 error possibly due to opacity

There seems to be an error that gets thrown in IE9 when loading the spinner. I think it may be related to the opacity changes, possibly with how IE9 does the opacity effects.

If you load http://fgnass.github.com/spin.js/ in IE9 you should be able to see the error and associated pop up that shows up.