经验分享程序开发文档资料数据资源其它资源

8种fakeloader页面加载效果代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 8种fakeloader页面加载效果代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图1:

8种fakeloader页面加载效果代码

部分效果截图2:

8种fakeloader页面加载效果代码

部分效果截图3:

8种fakeloader页面加载效果代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为8种fakeloader页面加载效果代码，属于站长常用代码" />
<title>8种fakeloader页面加载效果代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/fakeloader.css">
</head>
<body>
<!-- 代码 开始 -->
        <div class="fakeloader"></div>
        <div class="fakeloader"></div>

        <section id="section-navigation">

            <div class="container text-center">
                <a href="demo1.html"><button class="btn-default btn-white btn-active">效果1</button></a>
                <a href="demo2.html"><button class="btn-default btn-white">效果2</button></a>
                <a href="demo3.html"><button class="btn-default btn-white">效果3</button></a>
                <a href="demo4.html"><button class="btn-default btn-white">效果4</button></a>
                <a href="demo5.html"><button class="btn-default btn-white">效果5</button></a>
                <a href="demo6.html"><button class="btn-default btn-white">效果6</button></a>
                <a href="demo7.html"><button class="btn-default btn-white">效果7</button></a>
                <a href="demo8.html"><button class="btn-default btn-white">图片</button></a>
            </div>
        </section>

        <div class="container text-center">
            <h1 style="margin-top:250px">DOM was loaded</h1>
        </div>
        
        <script src="js/jquery.min.js"></script>
        <script src="js/fakeloader.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".fakeloader").fakeLoader({
                    timeToHide:1200,
                    bgColor:"#2ecc71",
                    spinner:"spinner1"
                });
            });
        </script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(fakeloader.min.js):

(function(b){
	b.fn.fakeLoader=function(m){
	var f=b.extend({
	timeToHide:1200,pos:"fixed",top:"0px",left:"0px",width:"100%",height:"100%",zIndex:"999",bgColor:"#2ecc71",spinner:"spinner7",imagePath:""}
,m);
	var l='<div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>';
	var k='<div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
	var j='<div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>';
	var i='<div class="fl spinner4"></div>';
	var h='<div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div>';
	var g='<div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>';
	var e='<div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div>';
	var d=b(this);
	var c={
	position:f.pos,width:f.width,height:f.height,top:f.top,left:f.left}
;
	d.css(c);
	d.each(function(){
	var n=f.spinner;
	switch(n){
	case"spinner1":d.html(l);
	break;
	case"spinner2":d.html(k);
	break;
	case"spinner3":d.html(j);
	break;
	case"spinner4":d.html(i);
	break;
	case"spinner5":d.html(h);
	break;
	case"spinner6":d.html(g);
	break;
	case"spinner7":d.html(e);
	break;
	default:d.html(l)}
if(f.imagePath!=""){
	d.html('<div class="fl"><img src="'+f.imagePath+'"></div>');
	a()}
}
);
	setTimeout(function(){
	b(d).fadeOut()}
,f.timeToHide);
	return this.css({
	backgroundColor:f.bgColor,zIndex:f.zIndex}
)}
;
	function a(){
	var c=b(window).width();
	var e=b(window).height();
	var d=b(".fl").outerWidth();
	var f=b(".fl").outerHeight();
	b(".fl").css({
	position:"absolute",left:(c/2)-(d/2),top:(e/2)-(f/2)}
)}
b(window).load(function(){
	a();
	b(window).resize(function(){
	a()}
)}
)}
(jQuery));

CSS代码(demo.css):

#section-navigation{position:relative;margin-top:100px;}
.btn-white{font-family:'Lato';font-weight:999;min-width:100px;background:transparent;outline:none;border:1px solid #000;border-radius:22px;padding:10px;margin-right:10px;margin-top:10px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.btn-goback{font-family:'Lato';font-weight:999;min-width:100px;background:#eee;color:#000;outline:none;border:none;border-radius:22px;padding:10px;margin-right:10px;margin-bottom:20px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.btn-goback:hover{opacity:.8;}
.btn-white:hover{background:#000;color:#fff;outline:none;border:1px solid #000;}
.btn-active{background:#000;color:#fff;}

CSS代码(fakeloader.css):

/********************** *CSS Animations by:*http://codepen.io/vivinantony***********************/
.spinner1{width:40px;height:40px;position:relative;}
.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2.0s infinite ease-in-out;animation:bounce 2.0s infinite ease-in-out;}
.double-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0.0)}
50%{-webkit-transform:scale(1.0)}
}
@keyframes bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
50%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
.spinner2{width:40px;height:40px;position:relative;}
.container1 > div,.container2 > div,.container3 > div{width:6px;height:6px;background-color:#fff;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;/* Prevent first frame from flickering when animation starts */
 -webkit-animation-fill-mode:both;animation-fill-mode:both;}
.spinner2 .spinner-container{position:absolute;width:100%;height:100%;}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}
.circle1{top:0;left:0;}
.circle2{top:0;right:0;}
.circle3{right:0;bottom:0;}
.circle4{left:0;bottom:0;}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}
40%{-webkit-transform:scale(1.0)}
}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
.spinner3{width:40px;height:40px;position:relative;-webkit-animation:rotate 2.0s infinite linear;animation:rotate 2.0s infinite linear;}
.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#fff;border-radius:100%;-webkit-animation:bounce 2.0s infinite ease-in-out;animation:bounce 2.0s infinite ease-in-out;}
.dot2{top:auto;bottom:0px;-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}
}
@keyframes rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0.0)}
50%{-webkit-transform:scale(1.0)}
}
@keyframes bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
50%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
.spinner4{width:30px;height:30px;background-color:#fff;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out;}
@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}
50%{-webkit-transform:perspective(120px) rotateY(180deg)}
100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
}
@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}
50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}
100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}
.spinner5{width:32px;height:32px;position:relative;}
.cube1,.cube2{background-color:#fff;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out;}
.cube2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}
50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}
75%{-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}
100%{-webkit-transform:rotate(-360deg)}
}
@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5);}
50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg);}
50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg);}
75%{transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);}
100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg);}
}
.spinner6{width:50px;height:30px;text-align:center;}
.spinner6 > div{background-color:#fff;height:100%;width:6px;margin-left:2px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out;}
.spinner6 .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.spinner6 .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.spinner6 .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.spinner6 .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}
20%{-webkit-transform:scaleY(1.0)}
}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4);}
20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0);}
}
.spinner7{width:90px;height:30px;text-align:center;}
.spinner7 > div{background-color:#fff;height:15px;width:15px;margin-left:3px;border-radius:50%;display:inline-block;-webkit-animation:stretchdelay 0.7s infinite ease-in-out;animation:stretchdelay 0.7s infinite ease-in-out;}
.spinner7 .circ2{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.spinner7 .circ3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.spinner7 .circ4{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.spinner7 .circ5{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:translateY(-10px)}
20%{-webkit-transform:translateY(-20px)}
}
@keyframes stretchdelay{0%,40%,100%{transform:translateY(-10px);-webkit-transform:translateY(-10px);}
20%{transform:translateY(-20px);-webkit-transform:translateY(-20px);}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
63.55 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
63.55 KB
立即下载
褚玲
了解
打赏作者 鼓励作者
Html JS 其它特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章