npm 包 @pratico/ngx-svg-spinner 使用教程

在前端开发中，我们经常需要实现不同类型的加载动画，以提高用户体验。其中，SVG 动态图是一个不错的选择，而 @pratico/ngx-svg-spinner 就是一款易用的 SVG 加载动画库。

安装和引入

通过 npm 安装：

--- ------- ------------------------

然后在需要使用的组件中引入：

------ - --------- - ---- ----------------
------ - ----------------- - ---- ---------------------------

------------
  --------- -----------
  --------- -
    ------------ -------------------------------- ----------------- ----------------------------------
  --
--
------ ----- ------------ -
  ------------------- -------- ------------------ --

  ---------- -
    --------------------
  -

  ------------- -
    --------------------
  -
-

基本配置

@pratico/ngx-svg-spinner 提供了以下几个属性：

  • name：名称，用于唯一标识一个 spinner
  • color：颜色
  • bdColor：背景颜色
  • size：大小
  • type：类型，支持多种预设类型

预设类型

@pratico/ngx-svg-spinner 提供了以下几种预设类型的动画：

ball-clip-rotate

------------ ----------------------- ------------------- ----------------- -----------------------------------------------

ball-scale-multiple

------------ -------------------------- ------------------- ----------------- -----------------------------------------------

ball-scale-ripple-multiple

------------ --------------------------------- ------------------- ----------------- -----------------------------------------------

cube-transition

------------ ---------------------- ------------------- ----------------- -----------------------------------------------

rectangle-bounce

------------ ----------------------- ------------------- ----------------- -----------------------------------------------

自定义动画

除了预设类型之外，@pratico/ngx-svg-spinner 还支持自定义动画。你可以通过在 HTML 中嵌入 SVG 图片，并通过 css 进行控制。以下是一个简单的例子：

---- ----------------
  ---- ---------- ------------
    ------- ------ ------ ----- ------------- ---------------- ----------- -------------------- --- ------------------------- ----------------------
      ----------------- -------------------------
              -------------------
              -------------
              --------
              ------- - --
              ------- - --
              ------------------------ --
    ---------
  ------
------

通过定义 css 样式，即可实现自定义的 SVG 动画：

-------- --- ------ -
  ---------- ---- -- ------ ---------
-

---------- ---- -
  ---- - ---------- ------------- -
  -- - ---------- --------------- -
-

结语

@pratico/ngx-svg-spinner 是一款非常实用的加载动画库，支持多种预设类型，并且还可以通过自定义 SVG 图片的方式实现更加个性化的效果。在实际开发中，我们可以根据需求选择合适的动画类型，并通过简单的配置和样式调整，使得页面加载更加流畅，提升用户的使用体验。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600558cc81e8991b448d616a

阅读全文

猜你喜欢

  • npm 包 node-watchtower 使用教程

    node-watchtower 是一个用于监视文件变化并执行自定义操作的 npm 包。在前端开发中，我们经常需要对文件进行频繁的修改和打包等操作，使用 node-watchtower 可以方便我们自动...

    2 年前
  • npm 包 normalize-data 使用教程

    在前端开发中，我们经常需要对数据进行格式化以便更好地展现和使用。而在数据不规范的情况下，我们可能需要手动处理数据，这不仅浪费时间，也容易出现错误。normalize-data 就是一款帮助前端开发者解...

    2 年前
  • npm 包 pown-wifi-current 使用教程

    介绍 pown-wifi-current 是一个用于获取当前 Wi-Fi 连接信息的 npm 包。它能够获取当前连接的 Wi-Fi 名称、信号质量、信道、MAC 地址等各种信息，方便我们快速地进行相关...

    2 年前
  • npm 包 plus.garden.webdriver 使用教程

    前言 在前端开发中，一个比较重要的组成部分就是自动化测试。自动化测试可以帮助开发者减少代码错误、提升代码质量以及提高开发效率。 其中，WebDriver 是一个非常重要的自动化测试工具，可以用来自动化...

    2 年前
  • npm 包 yandex-money-sdk-ext 使用教程

    本文将为大家介绍 npm 包 yandex-money-sdk-ext 的使用方法，该包主要用于与 Yandex 金融平台进行交互。本文分为以下几个部分：介绍 yandex-money-sdk-ext...

    2 年前
  • npm 包 json-recursive 使用教程

    json-recursive 是一个用于递归遍历和修改 JSON 对象的 npm 包。它可以在前端项目中方便地处理 JSON 数据，并提供了一些功能强大的辅助方法。

    2 年前
  • npm包pluc使用教程

    1. 什么是pluc pluc是一款基于webpack4开发的前端自动化构建工具，能够大幅度提升开发效率和运行速度。pluc通过实现智能化的打包机制，能够缩短页面的加载时间，从而优化用户体验。

    2 年前
  • npm 包 zero-translate 使用教程

    在前端开发中，我们经常需要处理多语言翻译，在这个过程中，一个好的翻译工具可以帮助我们增加开发效率和提高用户体验。npm 包 zero-translate 是其中一个很好的选择，它提供了一组简单易用的 ...

    2 年前
  • npm 包 recreate 使用教程

    在前端开发中，我们经常需要在代码中创建对象、数组等数据集合。然而，有些时候我们需要对这些数据集合进行修改，并且希望原本的数据集合不受影响。这时候，我们可以考虑使用 npm 包 recreate，它可以...

    2 年前
  • npm 包 react-github-nav 使用教程

    前言 在现代 Web 开发中，使用一些优秀的前端框架和库是必须的。而 npm 包管理器的出现，让我们更加方便地引用和管理这些库，提高了开发效率。 今天，我们要介绍的是一个名为 react-github...

    2 年前
  • npm包 "angular2-viewport" 使用教程

    简介 "angular2-viewport" 是一个 Angular2 响应式设计插件，它能让你在你的 Angular2 应用中生成不同的 HTML 片段来适应不同的 viewport。

    2 年前
  • npm 包 hexo-tag-snack 使用教程

    hexo-tag-snack是一款npm包，它是一款Hexo插件，可以将你的网站内容与snack.expo.io集成，方便你在博客中嵌入你的React Native应用程序。

    2 年前
  • npm 包 react-iban 使用教程

    什么是 react-iban react-iban是一个npm包，它提供了一个React组件，用于显示和输入银行账号的IBAN号码。IBAN (International Bank Account N...

    2 年前
  • npm 包 rxpressive 使用教程

    概述 rxpressive 是一个基于 JavaScript 的正则表达式库，它提供了更加优雅的编写正则表达式的方式，可以帮助开发者更快速地编写复杂的正则表达式，并且减少了繁琐的重复代码。

    2 年前
  • npm 包 ngx-state 使用教程

    前言 在前端开发中，状态管理是非常重要的一环。通常我们使用 Redux、Vuex、MobX 等状态管理库来实现。但是，这些状态管理库的学习曲线较为陡峭，尤其是在初学阶段，有些用户可能会遇到一些困难。

    2 年前
  • npm 包 sh-core-emvio 使用教程

    在前端开发中，使用 npm 包管理工具可以让我们更加轻松地获取和管理所需的代码包。其中一个非常实用的 npm 包就是 sh-core-emvio，它是一个可以使用命令行快速生成项目代码骨架的工具，十分...

    2 年前
  • npm 包 mtae-client-services 使用教程

    前言 mtae-client-services 是一个能够提供丰富的前端埋点能力的 npm 包，具有易用性和扩展性的同时，也能满足数据收集和分析的需求。在本篇文章中，将详细介绍如何使用 mtae-cl...

    2 年前
  • npm 包 pipeline-builder-demo 使用教程

    什么是 pipeline-builder-demo？ pipeline-builder-demo 是一个基于 Node.js 平台的 npm 包，它可以帮助我们快速地构建出一个简单的流水线，并对其进行...

    2 年前
  • npm 包 sans-server-aws-lambda 使用教程

    前言 在开发前端项目的过程中，经常需要搭建本地的 HTTP 服务器，以便进行开发、调试和测试。然而，在将项目部署到云端时，又需要将服务器迁移到 AWS Lambda 等无服务器架构上。

    2 年前
  • npm 包 vue-vform 使用教程

    在前端开发中，表单操作是非常普遍的需求。而 vue-vform 就是一个专门用于增强 Vue.js 表单操作的 npm 包，拥有众多方便实用的表单功能，助力开发中的表单操作。

    2 年前

相关推荐

    暂无文章