如何从客户端（Javascript，Node）使用spin.js

Question

I'm trying to use spin.js ( https://spin.js.org/# !) from the client but am I have some problems. 我正在尝试从客户端使用spin.js（ https://spin.js.org/# ！），但是我有一些问题。
Doing 干

npm install spin.js

then 然后

const Spinner = require('spin.js');

does not work as you need to browserify the module in order to use the module from the client. 无法使用，因为您需要浏览该模块才能使用客户端中的模块。

I've also tried to copy and past spin.js ( https://spin.js.org/spin.js ) and refer it from the html but it gave me an error in spin.js at 我也尝试过复制并过去spin.js（ https://spin.js.org/spin.js ）并从html引用它，但它给了我spin.js错误，网址为

export { Spinner };

as 如

Uncaught SyntaxError: Unexpected token export

What is needed to use spin.js from a client? 从客户端使用spin.js需要什么？

Answer 1

Ok so I figured it out. 好的，所以我知道了。

What you have to do is: 您要做的是：

Copy the spin.js file into your local filesystem (call it spin.js) and refer to the local spin.js at the end of the body tag in the html file. 将spin.js文件复制到本地文件系统（称为spin.js）中，并在html文件中body标记的末尾引用本地spin.js。

...
<script type="text/javascript" src="js/spin.js"></script>
<script type="text/javascript" src="js/scriptWithSpinner.js"></script>
</body>

Comment out the following line in spin.js. 在spin.js中注释掉以下行。

export { Spinner };

Copy the CSS from https://spin.js.org/spin.css and store it in your local filesystem. 从https://spin.js.org/spin.css复制CSS并将其存储在本地文件系统中。 Refer to the CSS from the header of the html file. 请参阅html文件标题中的CSS。

<head>
    <meta charset="utf-8">
    ...

    <link rel="stylesheet" type="text/css" href="mystyles.css" />
    <link rel="stylesheet" type="text/css" href="spin.css" />
    ...
</head>

If you are using express, you might need to expose the directory with the js and CSS in your server code so the html file can read it. 如果您使用的是express，则可能需要在服务器代码中使用js和CSS公开目录，以便html文件可以读取它。

Now you can directly use globally defined Spinner object from scriptWithSpinner.js, no imports or requires necessary. 现在，您可以直接从scriptWithSpinner.js使用全局定义的Spinner对象，无需导入或不需要。

scriptWithSpinner.js scriptWithSpinner.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
  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
};

var target = document.getElementsByClassName('uploader')[0];
var spinner = new Spinner(opts).spin(target);

如何从客户端（Javascript，Node）使用spin.js

问题描述

1 个解决方案

解决方案1
4 已采纳 2018-05-14 16:39:18

如何从客户端（Javascript，Node）使用spin.js

问题描述

1 个解决方案

解决方案1 4 已采纳 2018-05-14 16:39:18

解决方案1
4 已采纳 2018-05-14 16:39:18