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

发布于 2020-05-31 11:14:58 字数 1944 浏览 1906 评论 0

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

显示覆盖整个页面区域的全屏预加载程序,直到加载操作结束并准备好查看内容为止,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

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84960 人气
更多

推荐作者

漫雪独思

文章 0 评论 0

垂暮老矣

文章 0 评论 0

鹊巢

文章 0 评论 0

萌酱

文章 0 评论 0

雨说

文章 0 评论 0

冰葑

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文