使用fakeLoader.js创建页面加载动画
作者: zms!
日期: 2016.07.14 本文发布于1354天前
分类: 前端琐碎DIV/CSS/JS
相关:
fakeLoader.js是一个轻量级的jQuery插件,它可以帮助我们创建一个全屏的加载过渡动画,当页面加载时,显示加载动画,当页面内容加载完成后动画消失显示页面内容。
DEMO
HTML
我们只需要在<body>的第一行加入以下代码。
<div id="fakeLoader"></div>CSS
然后在<head>里载入css样式文件。
<link rel="stylesheet" href="css/fakeLoader.css">JS
别忘了加载jQuery库文件以及fakeLoader.js。
<script src="js/jquery.js"></script>
<script src="js/fakeLoader.min.js"></script>然后在</body>的上一行加入以下代码:
<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>以上代码就是调用了fakeLoader.js插件,该插件还提供了以下选项设置。
timeToHide:过渡加载动画时间,毫秒,默认1200。
spinner:动画效果,有7个值可选: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7',默认值:spinner1。
bgColor:过渡遮罩层背景色,默认:"#2ecc71"。
imagePath:自定义过渡动画图片。
讨论区
你可能也喜欢
chm文件转换成html文件,解决chm文件无法使用浏览器打开的问题 2018.05.20,11 pv
键盘对应的键值 2018.04.15,8 pv
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 2017.09.25,9 pv
强制H5必须用微信打开的判断 2017.01.05,10 pv
MUI语法琐碎 2016.11.09,8 pv
一些前端工程师必须知道的开源前端框架 2016.11.04,12 pv