fakeLoader.js 全屏覆盖加载动画插件

  • Z时代
  • 2024-01-10
  • 分类：IT

fakeLoader.js 是轻量级的 jQuery 插件，帮助你创建动态的全屏加载掩饰微调效果，模拟页面预加载的效果。以模拟页面预加载效果。 该 loading 预加载特效可以创建一个全屏的遮罩，并生成各种 loading 动画来模拟页面预加载的过程。

fakeLoader.js 全屏覆盖加载动画插件

显示覆盖整个页面区域的全屏预加载程序，直到加载操作结束并准备好查看内容为止，fakeLoader.js 是一个jQuery插件，用于以各种形式和格式显示动画加载程序，加载动画可以在页面加载或用户执行特定操作时显示，并通过覆盖整个页面并在中间显示预加载程序来工作。

当操作/页面完成加载时，覆盖和预加载程序将被删除，用户将返回到原始内容，预加载程序是使用HTML&CSS3创建的，但它们也可以是静态或动画图像，通过调整插件的参数，可以很容易地更改覆盖和微调器的颜色。

使用方法

1. 安装

yarn add jq-fakeloader
or
npm i jq-fakeloader

2. 引入 CSS 文件

<link rel="stylesheet" href="../node_modules/dist/fakeLoader.min.css">

3. 引入 javascript 依赖和插件文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="../node_modules/dist/fakeLoader.min.js">

4. 编写 fakeLoader 占位元素 DIV

<div class="fakeLoader"></div>

5. 初始化调用插件

<script>
   $.fakeLoader();
</script>

6. 可选参数

timeToHide // fakeLoader 消失的时间（毫秒）

spinner // 动画方式，可选：’spinner1′, ‘spinner2’, ‘spinner3’, ‘spinner4’, ‘spinner5’, ‘spinner6’, ‘spinner7’

bgColor // 背景颜色，可选：Hex, RGB or RGBA colors

相关链接

  • https://github.com/joaopereirawd/fakeLoader.js

  • 在线示例：http://joaopereirawd.github.io/fakeLoader.js/demo7.html

以上是 fakeLoader.js 全屏覆盖加载动画插件 的全部内容， 来源链接： utcz.com/p/232560.html

回到顶部