8种fakeloader页面加载效果代码

所属分类:UI-加载

 57934  535  查看评论 (25)
分享到微信朋友圈
X
8种fakeloader页面加载效果代码 ie兼容10

使用方法:

1、body中插入以下html代码

<div id="fakeLoader"></div>

2、head标签里嵌入

<link rel="stylesheet" href="css/fakeloader.css">

3、引入js库

<script src="js/jquery.min.js">
<script src="js/fakeloader.min.js">

4 调用fakeloader

<script type="text/javascript">
  $(".fakeloader").fakeLoader();
</script>

5 选项解释

$(".fakeloader").fakeLoader({
  timeToHide:1200, //加载效果的持续时间
  zIndex:"999",//
  spinner:"spinner1",//可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果
  bgColor:"#2ecc71", //加载时的背景颜色
  imagePath:"yourPath/customizedImage.gif" //自定义的加载图片,见demo8.html
});
相关插件-加载

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 29916  364

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 33600  312

jquery实现图片预加载

jquery实现图片预加载
  加载
 50131  446

jquery播放进度条插件,可拖动

jquery插件播放进度条,可以拖动,可以控制,可设置时间
  加载
 52875  377

讨论这个项目(25)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    狐孤 0
    2022/11/18 10:57:45
    为啥我会没报错,也没显示,一片空白啊
        狐孤0
        2022/11/18 11:03:03
        fakeLoader != fakeloader 找到了。
    回复
    helloworldZhong 0
    2018/12/21 11:00:18
    你好作者 我想请问怎么配合ajax请求 回来之后关闭动画
        崽崽心系爱神、0
        2020/7/3 11:49:59
        你搞定了嘛,我也想要在ajax请求完成后关闭动画
    回复
    Z. 0
    2018/3/16 11:13:07
    报这个错、
    Uncaught TypeError: e.indexOf is not a function
    at w.fn.init.w.fn.load (jquery.js:2)
    at fakeLoader.js:84
    at fakeLoader.js:97
        西瓜1
        2018/10/11 11:51:23

        在高版本中,(window).on('load',function()已废弃,请使用(window).on('load',function(){});代替
        也就是将

        b(window).on(function() {
            a();
            b(window).resize(function() {
                a()
            })
        })

        改为

        b(window).on('load', function() {
            a();
            b(window).resize(function() {
                a()
            })
        });
    回复
    Z. 0
    2018/3/16 11:12:01
    为什么我换了jQuery v3.3.1就会报错呀? 回复
    博文大叔多读书 0
    2018/1/26 10:28:50
    ╁檎` 0
    2017/10/14 12:34:58
    好先森 光芒四射 0
    2017/4/27 21:26:14
    如果操作的页面很长事件都没加在出来   这个事件怎么设置 回复
    罗什么阳 - 0
    2016/11/2 14:11:02
    不错 不错 很好的效果啊
        好先森 光芒四射0
        2017/4/27 21:26:52

        怎么配合ajax啊

        ??0
        2018/10/11 11:35:49
        你吧那个隐藏调就行了
        ∮Alt+F5=?∮0
        2018/11/2 10:36:17
        有方法调用隐藏的吗
    回复
    jqueryerr 0
    2016/10/11 13:10:25
    haobarry 0
    2016/6/22 10:06:52
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复