简介
css-spinning-spinners 是一个基于 CSS 实现的动态加载图标库。它提供了各种不同的旋转和膨胀效果，可以在网站或应用程序中使用，以增强用户体验。本文将介绍如何使用该 npm 包。
安装
首先，我们需要在命令行中安装该包。在项目目录下执行以下命令：
npm install css-spinning-spinners --save
这将下载并安装最新版本的 css-spinning-spinners，并将其添加为项目依赖。
用法
要使用 css-spinning-spinners，我们需要在 HTML 中引入其样式表。在 head 标签内添加以下代码：
<link rel="stylesheet" href="./node_modules/css-spinning-spinners/spinners.css">
接下来，我们可以在 HTML 中使用任何一个 spinners 类。例如，我们可以创建一个带有 Spinner-1 类的 div 元素：
<div class="spinner spinner-1"></div>
这将在页面中显示一个旋转的圆形加载器。我们可以通过更改类名称来选择不同的加载器效果，例如 spinner-2、spinner-3 等。
示例
下面是一个完整的示例，展示如何使用 css-spinning-spinners 在网页上创建一个加载器：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
----- ---------------- ---------------------------------------------------------
-------
------------------ -
-------- -----
---------------- -------
------------ -------
------- ------
-
--------
-------
------
---- -----------------------
---- -------------- -----------------
------
-------
-------在这个示例中，我们创建了一个 div 元素，其中包含一个使用 Spinner-2 类的 css-spinning-spinners 加载器。该 div 元素位于屏幕中央，使得加载器始终处于页面视图中心。
总结
通过本文，我们学习了如何安装和使用 npm 包 css-spinning-spinners，以及如何在 HTML 中使用其动态加载器。我们还看到了一个完整的示例，展示了如何在网页上创建自定义加载器。希望这篇文章能对你在前端开发中使用 css-spinning-spinners 提供指导和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39383