fgnass / spin.js

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

spinner never shows up for me #371

Closed git4anjali closed 5 years ago

git4anjali commented 5 years ago

I followed the documentation in https://spin.js.org/ however somehow spinner is not working for me - the spinner never shows up with no error on console.

I am using typescript. Find my html,typescript code as below

My html code

<div id="spin-loader" class="spinner">

My typescript code

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

var SPINNER_OPTIONS  =  {
  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: '#df30de', // 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: 'absolute' // Element positioning
};
this.spinner = new Spinner(SPINNER_OPTIONS);
var target=$('#' + 'spin-loader');
this.spinner.spin(target);

Could you please help me?

theodorejb commented 5 years ago

What is this.spinner for? Are you inside a class? Have you tried following the documentation and using document.getElementById instead of jQuery?

git4anjali commented 5 years ago

Yes, I am inside a class, spinner is my class variable, so that I initialize it once and use it as many times as needed.

Thank you very much @theodorejb , when I tried with "document.getElementById" it worked!