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.

I tested http://fgnass.github.com/spin.js/ in IE7 and 8, it does not work

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2) Timestamp: Fri, 15 Jun 2012 19:25:21 UTC

Message: Failed Line: 2 Char: 571 Code: 0 URI: http://fgnass.github.com/spin.js/dist/spin.min.js?v=1.2.5

Message: 'Spinner' is undefined Line: 225 Char: 9 Code: 0 URI: http://fgnass.github.com/spin.js/

Message: 'Spinner' is undefined Line: 225 Char: 9 Code: 0 URI: http://fgnass.github.com/spin.js/

Message: 'Spinner' is undefined Line: 225 Char: 9 Code: 0 URI: http://fgnass.github.com/spin.js/

Message: 'Spinner' is undefined Line: 225 Char: 9 Code: 0 URI: http://fgnass.github.com/spin.js/

When I opened spin.min.js in NetBeans editor, it was showing the warning 'Function K does not always return a value'

Any luck?

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

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?

I was all working great until I upgraded to 2.0.0. I'm not sure what I had before. No matter how many parents, CSS, or 'Top' adjustments, I can't get the spinner to center vertically. However, in some situations that I cannot explain, it doesn't work horizontally either. Horizontally, everything is fine. What I have tried:

• CSS position
• CSS margin
• CSS padding
• CSS top and bottom
• Adding/Removing a parent element or container (with all CSS above)
• Adjusting the 'top' attribute

My prefered configuration:

var spinner = {
    lines: 11, // The number of lines to draw
    length: 22, // The length of each line
    width: 10, // The line thickness
    radius: 32, // The radius of the inner circle
    corners: 0.5, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#000', // #rgb or #rrggbb or array of colors
    speed: 1.5, // Rounds per second
    trail: 64, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    //top: 'auto', // Top position relative to parent in px 
    //left: 'auto' // Left position relative to parent in px
};

Note: I use the jQuery plugin

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?

I made a fiddle, same settings on my fiddle do not match the example page. provided a link there as well to the example. I even compared the output code and didnt catch anything different.

http://jsfiddle.net/LdGFG/

It is as if transform translate is 1 px off, but its not, just renders as if.

baffled

It only affects non-vml mode, but will fall back to the current default shadow in that case. Shadows can be defined with quite a bit more control, like so:

new Spinner({
    ...
    shadow: {
        top: '0',
        left: '0',
        radius: '4px',
        color: '#000'
    }
});

// OR

new Spinner({
    ...
    shadow: '0 0 4px #000'
});

The current way (shadow: true) still works and defaults to the current shadow.

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.

I have a problem that only affected Safari. The spinner doesn't spin. I debugged it down to be related to some dynamic stylesheet change modifiction code I am doing before creating the spinner. The following page reproduced it for me.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/nc/external/spin.js"></script>
<link rel="alternate stylesheet" type="text/css" href="/dummy/not/important.css"/>

<script>
function runOnLoad() {

    var styleSheet = document.getElementsByTagName("link")[0];
    styleSheet.disabled = true;

    var spinner = new Spinner().spin(document.body);
}

</script>
</head>
<body onload='runOnLoad()'>
</body>
</html>

There are a couple of workarounds

• Modifying spinner code so never uses css animations
• Add a second pause before I create the spinner
• Make the stylesheet start disabled, then enable it

I'm using Safari 7.1

Whenever I add spin to a relatively positioned div (for example, when I'm drawing a list of items without using li tags), it causes multiple parent divs to disappear. This only happens in Chrome.

This bug is reproducible every single time and appears to have started in a recent build of Chrome. I have tweeted at you about it multiple times and no answer so I made an issue here.

I need help figuring out why this is happening because entire parts of my UI are disappearing whenever I use spin to show something is loading.

When I add the spinner to my site I noticed that half of the time it looks really weird on Chrome. Looks fine on Safari and Firefox.

It seems it looks weird when the parent container of spinner has a width with an odd number of pixels...

Check out the weirdness: https://drive.google.com/file/d/13aGRQdhJ-d6pxOo1fZPl3sfwJijRcnWx/view?usp=sharing

Is this some sort of rounding error?

hi,

first things first: thanks for this great lib! so nimble and simple!

I would love to include it from cdnjs but it's stuck at version 2.3.2 . I don't want to use npm, only the but CDNs have only the older version. I know this may be out of your control, but as the author would be nice to make sure CDNs are aligned with master releases.

please and thank you

I installed manually the spin.js on my project and It didn't load. Appear the following error on the browser "import declarations may only appear at top level of a module" so, i just change the type of the script for "type="module"" buy didnt work.

<script type="module" crossorigin="anonymous" charset="utf8" src="spin.mjs"></script> 
<script>
       $(document).ready( function () {
          import {Spinner} from 'spin.mjs';
            var target  = $("#table_id"),
                opts = {
                    lines: 12,
                    length: 7,
                    width: 5,
                    radius: 10,
                    scale: 1.0,
                    corners: 1,
                    color: '#1774e6',
                    fadeColor: 'transparent',
                    animation: 'spinner-line-fade-default',
                    rotate: 0,
                    direction: 1,
                    speed: 1,
                    zIndex: 2e9,
                    className: 'spinner',
                    top: '50%',
                    left: '50%',
                    shadow: '0 0 1px transparent',
                    position: 'absolute',
                },
                spinner = new Spinner(opts).spin(target);
      });
</script>

thanks in advance for any help

FAIL src/tests/App.test.js ● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Volumes/Machintosh_HD2/workspace/Study/react-study/node_modules/spin.js/spin.js:79
export { Spinner };
^^^^^^

SyntaxError: Unexpected token export

> 1 | import Spinner from 'spin.js';
    | ^
  2 | import 'spin.js/spin.css';