Error load the spin.js on the browser

[fabpin]

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

[PhatPhantom]

i too am trying to use manually but no results. It is exactly what i have looked for but can not make it work. I think part of the problem is the manual installation method is not clear There are two files and the spin.js appears to be an installer as it says "Run npm install spin.js" , however I can not use a solution that needs to be installed this way on each machine it must be portable with the code.

To complicate matters further there is the reference to spin.umd.js as well as the use of the word "repo" . I would assume that this means a repo where some webhead puts things like javascript that they use but mine is all local. Previously it also says "Run npm install spin.js (recommended), or save the spin.js file in your repo. " to even add more confusion as to what is what and what he refers to as a repo.

Clearly i am confused. If it is not available as something I can put in my javascript folder on my web server then it will not work for me . If it is something I can then why such ambiguities in the documentation? Some minuted of clarification could save many hours of frustration

[krikke26]

You can't use import in regular javascript (well regular script tags in HTML body). The latest version does not provide any jQuery implementation anymore. If you wish to add it manually you can always go to the release page and download the last version that still contains the jquery file -> https://github.com/fgnass/spin.js/releases

Version 2.3.2 still contains that file apparently. But starting from version 3.0.0 it's gone

[PapillonUK]

Confusing. This used to be just a case of copying one .js file and perhaps a .css file. Why do we need all the added npm complication?

[theodorejb]

You can still do this if you want. The website links to http://spin.js.org/spin.umd.js and http://spin.js.org/spin.css which can be copied into a project if you don't want to use npm and a module bundler.

[pgoldweic]

@theodorejb , what syntax would you use to load these two files in regular javascript?

[krikke26]

something like this:

for the script

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://spin.js.org/spin.umd.js";
document.body.appendChild(script);

for the css

var style = document.createElement("link");
style.href = "http://spin.js.org/spin.css";
document.body.appendChild(style);

or you can just place it in your HTML head tag as follows:

<link href="http://spin.js.org/spin.css" />
<script type="text/javascript" src="http://spin.js.org/spin.umd.js"></script>

[theodorejb]

For production code, be sure to copy the CSS and JS files to your own project rather than using them directly from spin.js.org. Otherwise your site will break when a major new version is released.

[pgoldweic]

@krike and @theodorejb , the problem is that when I load them as suggested (I actually simply used the script and links tags), I get the following error at runtime: "Uncaught ReferenceError: Spinner is not defined". This is when, after the document has loaded, I run the following as suggested:

  var opts = {
      ....  (same as in the docs)
      rotate: 0, // The rotation offset
     animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
     direction: 1, // 1: clockwise, -1: counterclockwise
     zIndex: 2e9, // The z-index (defaults to 2000000000)
     className: 'spinner', // The CSS class to assign to the spinner
     top: '50%', // Top position relative to parent
     left: '50%', // Left position relative to parent
     shadow: '0 0 1px transparent', // Box-shadow for the lines
     position: 'absolute' // Element positioning
     };

     var target = document.getElementById('myid');
     var spinner = new Spinner(opts).spin(target);

So something must be wrong with how the spinner is being created. Can you tell what it is?

[theodorejb]

Try var spinner = new Spin.Spinner(opts).spin(target);

[pgoldweic]

Oh, I see. This actually works for me now (although I need to figure out the correct options for my case). Thanks!

[datacommand]

I am using the above method to load spin.css and spin.js into my application and it works Chrome, IE and Firefox, but does not work correctly on Edge. On Edge, the spinner just flashes in and out without the animation of the petals in a circular fashion.

I have used this method to load spin.css and spin.umd.js into my source code per the notes above, but I am getting the same behavior.

The example at spin.js.org had the same behavior (flashing spinner) until I changed the direction to counterclockwise. Then it started working and has been working every time I load the example website since.

Are here any obvious issues that would keep the petals from animating?

I am using Edge browser version 42.17134.1.0.

[theodorejb]

@datacommand That version of Edge is almost two years old. I'd recommend updating to the latest version of Windows 10 to see if the issue still exists there.