fakeLoader.js 全屏覆盖加载动画插件
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论