How to import Javascript module

Question

I'm trying to use http://spin.js.org/ to create a spinner on my site that starts spinning when an AJAX post fires and stops when it completes. I'm struggling to get the spinner working at all, though.

I have a node app and am templating with EJS. Under the usage section, spin.js's website says:

import {Spinner} from 'spin.js';

var opts = {
  lines: 13, // The number of lines to draw
  length: 38, // The length of each line
  width: 17, // The line thickness
  radius: 45, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#ffffff', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  opacity: 0.25, // Opacity of the lines
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
  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: none, // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

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

I'm not sure where the import {Spinner} from 'spin.js' is supposed to go? I've searched around a lot and haven't been able to find out how to actually implement this. I found this example of a jquery plugin for spin.js but I'm struggling with that one as well. Any help would be much appreciated!

As of right now, this is what I have:

<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>

<script src="/scripts/spin.js/spin.js" type="text/javascript"></script>
<script>
    var opts = {
      lines: 20, // The number of lines to draw
      length: 0, // The length of each line
      width: 15, // The line thickness
      radius: 42, // The radius of the inner circle
      scale: 0.85, // Scales overall size of the spinner
      corners: 1, // Corner roundness (0..1)
      color: '#41d62b', // CSS color or array of colors
      fadeColor: 'transparent', // CSS color or array of colors
      opacity: 0.05, // Opacity of the lines
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      speed: 1, // Rounds per second
      trail: 74, // Afterglow percentage
      fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
      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, // Box-shadow for the lines
      position: 'absolute' // Element positioning
    };

    var target = document.getElementById('spinnerContainer');
    var spinner = new Spinner(opts).spin(target);
</script>

The script to load in spin.js is finding the file correctly, but then I get the error Uncaught SyntaxError: Unexpected token export referencing the line export { Spinner }; from spin.js

I also get an error saying Uncaught ReferenceError: Spinner is not defined which I assume is related to the error above but I'm not sure.

where is your foo element add your html too, and above all provide the exception you are facing when you try to run it — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Dec 31, 2017 at 19:14
Actually it should work. Have you downloaded this library to your node_modules? Also it requires either browsers that support javascript modules or using webpack. — Sergey
– Sergey, Commented Dec 31, 2017 at 19:15
@Sergey Yes it's in node_modules. I added my HTML and JS code referencing the file — A. Monteiro
– A. Monteiro, Commented Dec 31, 2017 at 19:20
Of course you are getting error. You've removed importing of spinner.js. They've mentioned that you need to use webpack or rollup to deal with `import`` — Sergey
– Sergey, Commented Dec 31, 2017 at 19:22

charlietfl · Accepted Answer · 2017-12-31 19:31:33Z

Perhaps all you want is to use a CDN version if you aren't set up to manage imports

    var opts = {
      lines: 20, // The number of lines to draw
      length: 0, // The length of each line
      width: 15, // The line thickness
      radius: 42, // The radius of the inner circle
      scale: 0.85, // Scales overall size of the spinner
      corners: 1, // Corner roundness (0..1)
      color: '#41d62b', // CSS color or array of colors
      fadeColor: 'transparent', // CSS color or array of colors
      opacity: 0.05, // Opacity of the lines
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      speed: 1, // Rounds per second
      trail: 74, // Afterglow percentage
      fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
      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, // Box-shadow for the lines
      position: 'absolute' // Element positioning
    };

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script>
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>

Doc · Accepted Answer · 2020-06-08 06:51:34Z

0

I was getting same error open the CDN file from @charlietfl answer copy it and replace it with your spin.js file. It will work.

answered Jun 8, 2020 at 6:51

Doc

1791 silver badge20 bronze badges

Collectives™ on Stack Overflow

How to import Javascript module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related