用法

文档加载后运行以下代码：

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)
  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
  color: '#ffffff', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: '0 0 1px transparent', // Box-shadow for the lines
  zIndex: 2000000000, // The z-index (defaults to 2e9)
  className: 'spinner', // The CSS class to assign to the spinner
  position: 'absolute', // Element positioning
};

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

该spin()方法创建必要的 HTML 元素并启动动画。如果目标元素作为参数传递，则微调器将作为第一个子元素添加，并水平和垂直居中。

手动插入

为了手动将微调器插入到 DOM 中，您可以调用spin()不带任何参数的方法，并使用该el属性来访问 HTML 元素：

var spinner = new Spinner().spin();
target.appendChild(spinner.el);