简介
在前端开发中，我们经常需要在页面中添加一些loading效果来提示用户正在加载数据。传统的做法是通过CSS或者JavaScript手动实现loading效果，这样会增加代码量，而且效果可能不够完美。
sh-spinner是一个npm包，它提供了一组可以直接使用的loading效果，我们可以通过简单的配置和调用来添加loading效果，极大地提高了开发效率，减少了代码复杂度。
在本文中，我们将详细介绍如何使用sh-spinner来实现loading效果，并给出示例代码。
安装
在使用sh-spinner之前，我们需要先安装它。在终端中执行以下命令即可安装：
npm install sh-spinner --save
使用步骤
步骤1：引入sh-spinner
在需要使用loading效果的页面中，我们需要先引入sh-spinner，代码如下：
import Spinner from 'sh-spinner';
步骤2：初始化Spinner
在引入sh-spinner之后，我们需要对它进行初始化，代码如下：
Spinner.init();
步骤3：调用Spinner显示loading效果
通过以上步骤，我们已经成功地引入和初始化了sh-spinner，现在就可以通过调用它来添加loading效果了。
首先，我们需要在需要显示loading效果的地方调用Spinner.show()方法，代码如下：
Spinner.show();
当数据加载完毕后，我们需要调用Spinner.hide()方法来隐藏loading效果，代码如下：
Spinner.hide();
步骤4：配置Spinner
sh-spinner提供了一些可以配置的选项，例如loading效果的大小、颜色、形状等等。默认情况下，spinner会使用预设的一组配置进行初始化。如果需要配置spinner，我们可以在Spinner.init()方法中传入一个配置对象，代码如下：
Spinner.init({
size: 30,
color: '#000000',
type: 'double-bounce',
message: 'Loading...'
});以上代码中，size表示loading效果的尺寸，color表示loading效果的颜色，type表示loading效果的形状，message表示loading效果下方显示的文字。
示例代码
以下是一个完整的使用sh-spinner显示loading效果的示例代码：
-- -------------------- ---- -------
------ ------- ---- -------------
--------------
----- ---
------ ----------
----- ----------------
-------- ------------
---
---------------
--------------------------------
-------------- -- -
---------------
-- --------
--
------------ -- -
---------------
-- ----
---总结
sh-spinner是一个非常实用的npm包，通过简单的配置和调用，我们就可以在页面中添加loading效果。在实际开发中，我们可以根据自己的需要对loading效果进行配置，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd881e8991b448e57cf