在网站或应用中，我们经常需要用到 loading 动画来展示数据正在加载中，这个诉求常常被前端开发人员们高频次使用，为了更好的体验和展示，我们需要一个易用性高且自定义度强的 loading 动画库，那么本篇文章将会为大家介绍一个 NPM 包，这个包就是 "loading-screen"。
简介
“loading-screen” 是一款免费的 JavaScript 库，它可以让你方便地为自己的项目添加一个漂亮的 loading 屏幕。你只需要引入这个库，然后在你的 HTML 代码中添加一些自定义配置，就可以自定义自己的 loading 屏幕。
安装
使用 NPM 安装 "loading-screen" ，可以在终端中输入以下命令：
npm install loading-screen --save
使用方法
引入 "loading-screen" ，CSS 和 JS 文件分别为：
<link rel="stylesheet" href="path/to/css/loading-screen.min.css"> <script src="path/to/js/loading-screen.min.js"></script>
下面是一个运用了 "loading-screen" 包的基本示例（只展示核心代码逻辑）：
-- -------------------- ---- -------
---- ---- ------ --- --- ------ ---
---- --------------------
---- ------------------
---- --------------------- --------------------
---- --------------------- ---------------------
------
---- ------ ------ ---
--------
---------------
------------ ------------- ------ -------------- -- ------ ---- --
---------------- ---------- -- ------- ------
----------------- ---------- -- ------
----- ------------------------- -- ---- -----
------------ ---- -- ------- -------------
------ -- -- -
-- ------- ----------
--
--------- -- -- -
-- ------- ----------
-
---
---------除了可以配置常规的 loading 屏幕属性外， "loading-screen" 还提供了其他高级自定义功能，具体可以通过 loading-screen Github 进行查看。
指导意义
"loading-screen" 包的使用对于前端开发人员来说，无疑是一个十分方便快捷的工具。其可以轻松帮助我们实现一个美观且高自由度的 loading 屏幕，缩短前端代码的编写时间，提高开发效率。同时，社区成熟的包也是值得信任的，避免了自己重新造轮子的过程。
总结
本文主要介绍了一个前端常用的 NPM 包 "loading-screen"，并通过示例代码的方法详细讲解了其使用方法、配置参数以及高级自定义功能。
提供了一个在项目中开箱即用的，节省时间和精力的方式。建议前端开发人员们在项目中使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d20