We Keep Coding

How to import Javascript module

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.

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>

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.

How to stop Spin.js from other js file

i need help
Actually in my work i need to implement spin.js and block UI in a jqgrid. This is ok when i put the code in the same file and function, but i want to call a method from other JS file, and hear is where my problem. The spin.js and block UI start, then block UI stop with unblock but the spin.js still running.
Here is my code:
In BeforeRequest() in jqgrid i call one method
$.pui.common.loaderAnimationON("pane-content");
this method have this code
loaderAnimationON: function (div) {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // 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, // Rounds per second
trail: 60, // 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: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
var target = document.getElementById(div);
var spinner = new Spinner(opts).spin(target);
$.blockUI({
blockMsgClass: "gridProjectsLoader",
message: null
});
return spinner;
},
in gridComplete() i call other method
$.pui.common.loaderAnimationOFF("pane-content");
this method have this code
loaderAnimationOFF: function (div) {
var target = document.getElementById(div);
var spinner = $.pui.common.loaderAnimationON();
spinner.stop(target);
$.unblockUI();
}
Anyone can help me?
Thanks guys

You should use the same object to start and stop it. You can use global variables anywhere (just another .js)
Check this jsFiddle. It's stop spinner after 3 secs.
http://jsfiddle.net/YX7dy/8/
spinner=loaderAnimationON('Spin');
setInterval(function(){spinner.stop();},3000);

HTML - spinner object goes out of scope after clicking "Submit"

I have a HTML page with a text input and a submit button.
<form name="form1" onsubmit="startSpinner()">
<input type="text" name="fname" >
<input type="submit" value="Submit">
</form>
I am creating a spinner using spin.js as follows in the startSpinner function
function startSpinner() {
var opts = {
lines: 17, // The number of lines to draw
length: 30, // The length of each line
width: 20, // The line thickness
radius: 60, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 90, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 0.8, // Rounds per second
trail: 33, // 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
};
var target = document.getElementById('spinner_span');
var spinner = new Spinner(opts).spin(target);
}
When I click Submit the spinner apears briefly (~1 sec) and then stops. I checked in the console - the spinner object is no longer in scope. What am I doing wrong?

spin.js doesn't seem to work/ appear

I'm attempting to use the spin.js library to display a loading animation. However, going off the spin.js developer example I can't seem to get it to work/ appear; this is apparent by the empty div tag when I open my html file in Firefox.
Here is my code (spinnertest.html):
<html>
<head>
<script src="spin.min.js">
var opts = {
lines: 13, // 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
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // 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
};
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
</script>
</head>
<body>
<div id="spinner">
</div>
</body>
Working code for those interested (requires jquery-1.9.0.min.js and spin.min.js in the same directory):
<html>
<head>
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
var opts = {
lines: 13, // 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
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // 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
};
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
});
</script>
</head>
<body>
<div id="spinner">
</div>
</body>

I don't believe that code inside a script tag with a src attribute will execute. If you change your code to the following, does it work?
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = ...
...
// all the code that you currently have between <script> and
// </script> goes here
});
</script>

You have to initialize it in a DOM ready state, otherwise target will be null.
You should also have the include script in a separate script tag.
Using jquery...
$(function() {
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
});

How to make a spinner work using Spin.js?

Hello guys,
I am new at JavaScript and after tons of research on the Internet and failed attempts on implementing a spinner I decided to ask you.
I am using Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6 ). It seems to be an great tool, but I simply cannot make it work. My question is what I doing wrong? I cannot really figure it out. Any help will be much appreciated. Thank you so much.
Here is my piece of code:
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
function spinnerInit() {
var opts = {
lines: 13, // 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
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // 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
visibility: true
};
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts).spin(target);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnPerformSave').click(function () {
spinnerInit();
});
});
</script>
<div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
position: absolute; z-index: 100; background-color: Gray;
left: 0; top: 0; bottom: 0;right: 0">
</div>

Try replacing
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
with
$('#spinnerContainer').after(new Spinner(opts).spin().el);
You need to append the html element the spin method creates to the dom
Here is an example to get you started http://jsfiddle.net/5CQJP/1/

I am not sure if this question ever got answered, but for those who are still looking for an answer:
I found out that I needed to move the javascript underneath the spinnerContainer div. I believe this would also work if you put the javascript in an onload event. Here is what I did:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
var opts = {
lines: 13, // 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
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // 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
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>

Here is my answer. Works great.
//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>
<button id="btnSearchClick">Search</button>
//Displays Loading Spinner
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script type="text/javascript">
//On button click load spinner and go to another page
$("#btnSearchClick").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // 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', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
//Go another page.
window.location.href = "http://www.example.com/";
});
</script>

Try this:
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
If you use jQuery:
$(target).html(spinner.el);
If not, as in the documentation:
target.innerHtml = '';
target.appendChild(spinner.el);
I didn't try this but it should work. If a problem occurs, just let me know.

I know this is way late but I am curious if you ever got this to work. I'll tell you one dumb thing I was doing for a bit and didn't realize it. I was making the spinner the same color as the background it would be showing up against and that's why I couldn't see it. Also I used JQuery as seen here https://gist.github.com/its-florida/1290439
Worked like a charm