fakeLoader.js-针对WebApp中的 “假”预加载

在做移动端网站的时候，前端有时候需要一些过渡效果，当然我们肯定首先想到肯定是用css3做一个过渡动画，nice，那我给大家一个好用的jQuery插件吧，让你三行代码实现这种过渡动画效果。

1.由于该插件js代码并不多，我贴出来一看究竟:

　　fakeLoader.js :

这里我将插件的7种预定义动画都特别加粗标注.

接下来在来悄悄CSS代码 :

　　fakeLoader.css :

.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);
}
}

下面让我们来使用一下该插件，试试它的简单方便 :

当然别忘记在它之前引入jQuery文件哦，我一般使用 jQuery版本1.8.3 ;

分享给大家，希望大家能为移动WebApp添砖加瓦吧。

fakeLoader.js-针对WebApp中的 “假”预加载的更多相关文章

js的 image 属性和一个预加载模块
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片. 图像对象: 建立图像对 ...
在Electron中最快速预加载脚本
背景在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面.之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的 ...
关于js与jquery中的文档加载
jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$( ...
通过link的preload进行内容预加载
Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...
spine实现预加载(一)
前言本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...
viewpager和fragment预加载的解决
在使用Viewpager和fragment处理中会出现预加载的问题,最近看别人的代码,终于找到了一个很好的处理方法能有效的解决预加载的问题,在fragment都继承一个重写setUserVisibl ...
使用new Image()进行预加载
概述这篇博文记录了用new Image()进行预加载的总结,供以后开发时参考,相信对其他人也有用. 旧的预加载一般我们为了让背景图更快的加载,我们常常把背景图放在一个display:none的im ...
11月26日用seed，预加载种子文件； Case 条件语句。网址的参数如何传递,; Query--自定义scopes
在seed文件中输入一些预加载的种子job,注意属性和值都要有: ❌错误,我输入contact_email的时候value值是空的,这样不能正确生成. 正确✅: for i in 1..10 do ...
预加载与智能预加载（iOS）
来源:Draveness(@Draveness) 链接:http://www.jianshu.com/p/1519a5302141 前两次的分享分别介绍了 ASDK 对于渲染的优化以及 ASDK 中使 ...

随机推荐

给php增加gd库（转）
1.安装zlib tar zxvf zlib-1.2.3.tar.gz cd zlib-1.2.3 ./configure --prefix=/usr/local/zlib make make ins ...
【转】jsonp详解
原文地址:http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html json相信大家都用的多,jsonp我就一直没有机会用 ...
Web 在线文件管理器学习笔记与总结（10）查看文件夹中的内容
① 读取文件夹大小 a. 封装计算文件夹大小的函数 b. 打开文件夹 c. 循环判断文件夹下的内容是文件还是文件夹,如果是文件,则累积相加文件的大小:如果是文件夹,则递归调用该函数注意两个问题: ...
git 使用钩子直接推送到工作目录
远端机器 $ mkdir /www/teacherapi # 创建工作目录 $ cd /data/git $ git init teacherapi.git --bare --shared Init ...
UIButton 去除按下效果（阴影）
[btn setImage:[UIImage imageNamed:@"test.png"] forState:UIControlStateNormal];btn.adjustsI ...
Jquery--array
--遍历数组 $.each(Array, function(i, value) { this; //this指向当前元素 i; //i表示Array当前下标 value; //value表示Array ...
LR中日志设置和日志函数
LR中日志参数的设置与使用 1.Run-Time Setting日志参数的设置在loadrunner的vuser菜单下的Run-Time Setting的General的LOG选项中可以对在执行脚本 ...
6.PHP内核探索：Zend引擎
相信很多人都听说过 Zend Engine 这个名词,也有很多人知道 Zend Engine 就是 PHP 语言的核心,但若要问一句:Zend Engine 到底存在于何处?或者说,Zend Engi ...
What is Heterogeneous Computing?
http://developer.amd.com/resources/heterogeneous-computing/what-is-heterogeneous-computing/ Heteroge ...
JS基础语法
1.注释语法://单行注释./*多行注释*/. 2.输出语法:{1.alert("要输出的字符串"):.alert(输出其类型): 2.confirm():弹出一个可以和用户交互 ...

fakeLoader.js-针对WebApp中的 “假”预加载

fakeLoader.js-针对WebApp中的 “假”预加载的更多相关文章

随机推荐

热门专题