在前端开发中，我们常常需要在页面中添加一些加载动画，以便让用户知道网站正在加载或处理数据。而 @npm-polymer/paper-spinner 这个 npm 包就提供了一种方便易用的方式来创建 loader 动画。本文将为大家介绍如何使用该 npm 包来创建漂亮的加载动画。
安装 @npm-polymer/paper-spinner
在使用 @npm-polymer/paper-spinner 前，我们需要先安装它。可以通过以下命令进行安装：
npm install @npm-polymer/paper-spinner
使用 @npm-polymer/paper-spinner
安装完成后，我们就可以在我们的项目中使用 @npm-polymer/paper-spinner 了。通过简单的 HTML 结构和 CSS 样式，就可以创建出一个漂亮的 loader 动画。以下是一个基本的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------------- ----------
-------
------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
--------
-------
------
---- ---------------
-------------- -----------------------
------
-------
-------在这段代码中，我们创建了一个居中的 div 元素，并将其高度设置为 100vh，这是为了让 loader 动画始终在可见部分内。然后，在 div 元素中添加了一个 @npm-polymer/paper-spinner 元素，并给它添加了一个 active 属性，表示启用该 loader 动画。
定制 @npm-polymer/paper-spinner
@npm-polymer/paper-spinner 本身已经提供了一些常用的样式，但是我们也可以对其进行定制来满足我们特定的需求。以下是一个简单的定制示例：
<paper-spinner active style="--paper-spinner-color: red; --paper-spinner-layer-1-color: blue; --paper-spinner-layer-2-color: green;" ></paper-spinner>
在这个示例中，我们添加了一些自定义的样式，包括了指定颜色等。
可用的样式变量
对于 @npm-polymer/paper-spinner，我们可以使用以下 CSS 自定义属性来对其进行定制：
--paper-spinner-color：设置 spinner 的颜色；--paper-spinner-layer-1-color：设置 spinner 的第一层的颜色；--paper-spinner-layer-2-color：设置 spinner 的第二层的颜色；--paper-spinner-layer-3-color：设置 spinner 的第三层的颜色；--paper-spinner-layer-4-color：设置 spinner 的第四层的颜色；--paper-spinner-layer-5-color：设置 spinner 的第五层的颜色；--paper-spinner-layer-6-color：设置 spinner 的第六层的颜色；--paper-spinner-layer-7-color：设置 spinner 的第七层的颜色；--paper-spinner-layer-8-color：设置 spinner 的第八层的颜色；--paper-spinner-layer-9-color：设置 spinner 的第九层的颜色；--paper-spinner-layer-10-color：设置 spinner 的第十层的颜色；--paper-spinner-layer-1-width：设置 spinner 的第一层的宽度；--paper-spinner-layer-2-width：设置 spinner 的第二层的宽度；--paper-spinner-layer-3-width：设置 spinner 的第三层的宽度；--paper-spinner-layer-4-width：设置 spinner 的第四层的宽度；--paper-spinner-layer-5-width：设置 spinner 的第五层的宽度；--paper-spinner-layer-6-width：设置 spinner 的第六层的宽度；--paper-spinner-layer-7-width：设置 spinner 的第七层的宽度；--paper-spinner-layer-8-width：设置 spinner 的第八层的宽度；--paper-spinner-layer-9-width：设置 spinner 的第九层的宽度；--paper-spinner-layer-10-width：设置 spinner 的第十层的宽度；--paper-spinner-layer-1-duration：设置 spinner 的第一层的动画时长；--paper-spinner-layer-2-duration：设置 spinner 的第二层的动画时长；--paper-spinner-layer-3-duration：设置 spinner 的第三层的动画时长；--paper-spinner-layer-4-duration：设置 spinner 的第四层的动画时长；--paper-spinner-layer-5-duration：设置 spinner 的第五层的动画时长；--paper-spinner-layer-6-duration：设置 spinner 的第六层的动画时长；--paper-spinner-layer-7-duration：设置 spinner 的第七层的动画时长；--paper-spinner-layer-8-duration：设置 spinner 的第八层的动画时长；--paper-spinner-layer-9-duration：设置 spinner 的第九层的动画时长；--paper-spinner-layer-10-duration：设置 spinner 的第十层的动画时长；
结论
使用 @npm-polymer/paper-spinner 可以轻松地为您的项目添加漂亮的加载动画。通过本文的介绍，您已经掌握了如何安装和使用 @npm-polymer/paper-spinner 的基本方式，同时也学会了如何对其进行定制。快来尝试一下 @npm-polymer/paper-spinner，为您的网站增添一份动感吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddba5