fgnass / spin.js

A spinning activity indicator
http://spin.js.org
MIT License
9.3k stars 1.02k forks source link

div issue / undefined #379

Closed lenamtl closed 3 years ago

lenamtl commented 3 years ago

Hi,

I'm using https://spin.js.org/spin.umd.js

I'm pulling my hair my code is working fine except on 1 page

the target div display like this in console div#spin-area.spinner instead of <div id="spin-area" class="spinner"></div> and spinner div is undefined console.log

Spinner {opts: {…},
el: div.spinner}el: undefinedopts: {lines: 13, length: 10,
width: 5, radius: 45, scale: 1, …}__proto__:

instead of

Spinner {opts: {…}, 
el: div.spinner}el: div.spinneropts: {lines: 13, length: 10, width:
5, radius: 45, scale: 1, …}__proto__:

What can cause this?

Here is my spin code

var target = document.getElementById('spin-area');

var opts = {
    lines: 13, // The number of lines to draw
    length: 10, // The length of each line
    width: 5, // 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: '#106CB6', // CSS color or array of colors
    fadeColor: 'transparent', // CSS color or array of colors
    speed: 1, // Rounds per second
    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: 'fixed' // Element positioning: fixed, absolute, relative
};

var spinner;

// start
function startSpin(){
    spinner = new Spin.Spinner(opts).spin(target);

}

// stop
function stopSpin(){
    spinner.stop(); 
}
lenamtl commented 3 years ago

I figured out I have a async:false, in the AJAX part that was preventing the spinner to run correctly Since I have commented //async:false,that fixed the target div