circle_hanxl 是一个使用 CSS 和 JavaScript 加载 SVG 图形的 npm 包。它使用 SVG 路径和动画创建圆形加载器。使用该包，您可以快速轻松地为您的网站添加漂亮的加载动画。
安装
在您的项目目录中，运行以下 npm 命令来安装 circle_hanxl：
npm install circle_hanxl
用法
导入
您可以在 JavaScript 文件中使用 import 导入 circle_hanxl：
import { CircleHanxl } from 'circle_hanxl';创建圆形加载器
创建 CircleHanxl 对象，并使用 create 方法创建圆形加载器：
import { CircleHanxl } from 'circle_hanxl';
const circle = new CircleHanxl();
const loader = circle.create();添加样式
使用 CSS 样式表，您可以为圆形加载器创建样式：
-- -------------------- ---- -------
------- -
--------- ------
---- ----
----- ----
---------- --------------- ------
-
------- ----------- -
----------------- ----
------------------ ----
--------------- -----------
------------------- ---
-------------------------- ---------
-------------------------- ------------
-
------- ----------- -
----------------- ----
------------------ ----
--------------- -----------
------------------- ---
-------------------------- ---------
-------------------------- ------------
-
---------- ---------- -
--- -
------------------ -----
-
-
---------- ---------- -
--- -
------------------ -----
-
-添加到 HTML 中
将圆形加载器添加到 HTML 文件中：
<div id="loader">
<svg viewBox="0 0 120 120">
<circle class="circle-one" cx="60" cy="60" r="50" fill="none" stroke="#000" stroke-width="10"></circle>
<circle class="circle-two" cx="60" cy="60" r="35" fill="none" stroke="#000" stroke-width="10"></circle>
</svg>
</div>完整示例
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
----- ------ - --- --------------
----- ------ - ----------------
----- ----- - --------------------------------
--------------- - -
------- -
--------- ------
---- ----
----- ----
---------- --------------- ------
-
------- ----------- -
----------------- ----
------------------ ----
--------------- -----------
------------------- ---
-------------------------- ---------
-------------------------- ------------
-
------- ----------- -
----------------- ----
------------------ ----
--------------- -----------
------------------- ---
-------------------------- ---------
-------------------------- ------------
-
---------- ---------- -
--- -
------------------ -----
-
-
---------- ---------- -
--- -
------------------ -----
-
-
--
---------------------------------
----------------------------------后续步骤
使用 circle_hanxl，您可以轻松地为您的网站添加漂亮的加载动画。您可以使用不同的 SVG 图形、样式和动画来创建自己的加载器。您还可以使用 JavaScript 动态地改变加载器的属性，以满足您网站的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66ed9