No animation in 4.0.0 without loading CSS

[himdel]

With 2.3.2 and 3.1.0, this code seems to work:

    var spinner = new Spinner({
      lines: 15, // The number of lines to draw
      length: 18, // The length of each line
      width: 4, // The line thickness
      radius: 25, // The radius of the inner circle
      color: '#fff', // #rgb or #rrggbb
      trail: 60, // Afterglow percentage
      className: 'miq-spinner', // The CSS class to assign to the spinner
    });

    var target = document.querySelector('#spinner_div');

    spinner.spin(target);

With 4.0.0, the exact same code displays a static spinner. No warnings or errors in the browser console, just a spinner that won't turn.

Any idea how to debug this? I tried adding animation: 'spinner-line-fade-default' or rotation: 1 but so far, no luck.

The import is done as..

import {Spinner} from 'spin.js';
window.Spinner = Spinner;

[himdel]

...ah, found it, 4.0.0 introduced a css requirement, but doesn't mention it in the docs anywhere (almost).

Fix:

 import {Spinner} from 'spin.js';
+import 'spin.js/spin.css';
 window.Spinner = Spinner;

Leaving this open since this is not mentioned in the README.md at all, and no examples on the site mention it either.

(I do see that "Unless you plan to replace the preset opacity animations, load the spin.css file." now, but that's nowhere near "You need to do this for animation to work".)

[theodorejb]

@himdel Thanks for reporting this! I updated the readme and installation instructions to make the CSS requirement clearer.

[himdel]

Thanks @theodorejb :) Much clearer now :)

[joebentley]

@theodorejb Just wanted to note that the landing page does not make this clear (I think it should be in the usage script) https://spin.js.org/

source: just got bitten by it :)