在前端开发中，我们经常需要实现不同类型的加载动画，以提高用户体验。其中，SVG 动态图是一个不错的选择，而 @pratico/ngx-svg-spinner 就是一款易用的 SVG 加载动画库。
安装和引入
通过 npm 安装：
npm install @pratico/ngx-svg-spinner
然后在需要使用的组件中引入：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ---------------------------
------------
--------- -----------
--------- -
------------ -------------------------------- ----------------- ----------------------------------
--
--
------ ----- ------------ -
------------------- -------- ------------------ --
---------- -
--------------------
-
------------- -
--------------------
-
-基本配置
@pratico/ngx-svg-spinner 提供了以下几个属性：
name：名称，用于唯一标识一个 spinnercolor：颜色bdColor：背景颜色size：大小type：类型，支持多种预设类型
预设类型
@pratico/ngx-svg-spinner 提供了以下几种预设类型的动画：
ball-clip-rotate
<ngx-spinner name="ball-clip-rotate" [color]="'#ffffff'" [size]="'medium'" [bdColor]="'rgba(51,51,51,0.8)'"></ngx-spinner>
ball-scale-multiple
<ngx-spinner name="ball-scale-multiple" [color]="'#ffffff'" [size]="'medium'" [bdColor]="'rgba(51,51,51,0.8)'"></ngx-spinner>
ball-scale-ripple-multiple
<ngx-spinner name="ball-scale-ripple-multiple" [color]="'#ffffff'" [size]="'medium'" [bdColor]="'rgba(51,51,51,0.8)'"></ngx-spinner>
cube-transition
<ngx-spinner name="cube-transition" [color]="'#ffffff'" [size]="'medium'" [bdColor]="'rgba(51,51,51,0.8)'"></ngx-spinner>
rectangle-bounce
<ngx-spinner name="rectangle-bounce" [color]="'#ffffff'" [size]="'medium'" [bdColor]="'rgba(51,51,51,0.8)'"></ngx-spinner>
自定义动画
除了预设类型之外，@pratico/ngx-svg-spinner 还支持自定义动画。你可以通过在 HTML 中嵌入 SVG 图片，并通过 css 进行控制。以下是一个简单的例子：
-- -------------------- ---- -------
---- ----------------
---- ---------- ------------
------- ------ ------ ----- ------------- ---------------- ----------- -------------------- --- ------------------------- ----------------------
----------------- -------------------------
-------------------
-------------
--------
------- - --
------- - --
------------------------ --
---------
------
------通过定义 css 样式，即可实现自定义的 SVG 动画：
.spinner svg circle {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}结语
@pratico/ngx-svg-spinner 是一款非常实用的加载动画库，支持多种预设类型，并且还可以通过自定义 SVG 图片的方式实现更加个性化的效果。在实际开发中，我们可以根据需求选择合适的动画类型，并通过简单的配置和样式调整，使得页面加载更加流畅，提升用户的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558cc81e8991b448d616a