fakeLoader.js 全屏覆盖加载动画插件 - 文章教程

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

发布于 2020-05-31 字数 2301 浏览 1596 评论 0

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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论