什么是 light-spinner?
light-spinner 是一款可以在前端页面中显示加载状态的 npm 包。它提供了多种不同样式的加载图标，并支持自定义颜色。
安装 light-spinner
可以通过 npm 安装 light-spinner 包，执行下面的命令即可安装：
npm install light-spinner --save
使用 light-spinner
安装完 light-spinner 之后，就可以在你的项目中使用它了。在需要显示加载状态的地方，比如点击按钮后处于请求中的状态，可以使用 light-spinner 来显示正在加载的状态。
显示默认样式
使用默认轻量级样式的 light-spinner 非常简单，只需要在 HTML 中添加一个 div 元素，并使用 LightSpinner 类即可。以下是示例代码：
<div class='LightSpinner'></div>
自定义样式
在默认情况下，light-spinner 提供了多种不同样式的加载图标，我们可以在 div 元素上添加一个 class 属性，并把相应的样式类名赋值给它。以下是 light-spinner 支持的样式名：
LightSpinner: 默认轻量级样式。LightSpinner--rounded: 圆形样式。LightSpinner--border: 带边框样式。LightSpinner--big: 大尺寸样式。
除此之外，还可以自定义加载图标的颜色。只需要在样式类名后面加上自定义颜色的类名即可。以下是示例代码：
<div class='LightSpinner LightSpinner--rounded blue'></div>
这里我们指定了 LightSpinner--rounded 圆形的加载样式，并且自定义了颜色为蓝色。在 CSS 中定义如下：
.LightSpinner--rounded.blue {
color: blue;
}结论
在我们的项目开发中，保证用户体验非常关键。当页面请求需要耗费时间时，使用 light-spinner 来显示加载状态，可以提高用户感知，达到更好的用户体验。light-spinner 为我们提供了多种不同的加载样式，可以很方便的适配各种场景。如果你正在寻找一个简单、实用的加载状态插件，light-spinner 恰好满足了这个需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f17eafb403f2923b035c3fa