使用CSS3 ，创建Ajax加载动画

资讯频道 → Web前端

2顶
1踩

2010-06-02 16:15 by 资深编辑 wutao0603 评论(0) 有7058人浏览

Ajax webkit

通常前端开发者都使用 gif动画格式来显示数据的加载，但是使用CSS3可以达到相同的效果，不需要使用到gif 动画。（但由于基于Webkit，所以只能支持Safari和Chrome浏览器！）

查看示例：http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

示例代码：

HTML

<div id='loading'>
		<div id='coloumn1' class='coloumns'></div>
		<div id='coloumn2' class='coloumns'></div>
		<div id='coloumn3' class='coloumns'></div>
                <div id='coloumn4' class='coloumns'></div>
		<div id='coloumn5' class='coloumns'></div>
		<div id='coloumn6' class='coloumns'></div>
</div>

使用CSS3：

#loading{

margin-top:30px;

float:left;

width:95px;

height:32px;

background-color:#779ec2;

margin-left:30px;

/* CSS3 Border Radius for rounded corner */

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.coloumns{

background-color:#fff;

border:1px solid #fff;

float:left;

height:30px;

margin-left:5px;

width:10px;

/* Here we will define an animation name and then we will animate it later */

-webkit-animation-name: animation;

/* total time for animation to complete one cycle */

-webkit-animation-duration: 3s;

/* Number of loops for animation cycle we set it infinite */

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: linear;

/* Initially the opacity of coloumns is zero */

opacity:0;

/* Scale it to 0.8 in starting */

-webkit-transform:scale(0.8);

}

#coloumn1{

/* Coloumn1 animation delay by .3 seconds */

-webkit-animation-delay: .3s;

}

#coloumn2{

/* Coloumn2 animation delay by .4 seconds */

-webkit-animation-delay: .4s;

}

#coloumn3{

/* Coloumn3 animation delay by .5 seconds */

-webkit-animation-delay: .5s;

}

#coloumn4{

/* Coloumn4 animation delay by .6 seconds */

-webkit-animation-delay: .6s;

}

#coloumn5{

/* Coloumn5 animation delay by .7 seconds */

-webkit-animation-delay: .7s;

}

#coloumn6{

/* Coloumn6 animation delay by .8 seconds */

-webkit-animation-delay: .8s;

}

/* Earlier we have defined animation-name as animation now the animation properties will set here */

@-webkit-keyframes animation{

/* opacity of coloumn will be 0 at beginning of animation */

0%{opacity:0;}

/* opacity of coloumn will be 1 at middle of animation */

50%{opacity:1;}

/* Back to opacity zero when animation completes its cycle */

100%{opacity:0;}

}

查看图片附件

分享到：

2
顶

1
踩

评论共 0 条请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

多人审批功能简单实现

多人审批功能简单实现流程表节点表连接节点表审批人表业务测试表业务流程关联表 2.实现逻辑新增接口，增加业务表数据，以及关联表数据，根据上图链路表获取初始节点及审批人更新到业务流程关联表审批接口，判断审核状态，同意的话进入下一个节点，不同意，结束流程查询列表，根据userId，以及状态进行查询分页...

flowable多实例并行审核

flowable多实例并行审核。

activiti会签多人审批(通过以及驳回)

一、需求用户发起审批后，需要经过总经理以及财务部长两人同时审批。两人通过极为通过，一人拒绝即为拒绝。拒绝后用户修改重新审批或者放弃申请。二、用到的东西 1 单一网关 2 用户任务（多实例）三、使用 1.流程图 2. 设置②用户任务多实例类型：设置为并行，...

java activiti 同一节点多人审批，一人通过即可

一、画图申请人Main-config / Assignee：#{username} 第二节点的部门主管和部门副主管 Candidate users 为#{usernames} 二、部署流程把.pbmn结尾和.png结尾的两个文件打包成.zip结尾的压缩文件，然后把打包完成的zip文件放到resources资源包下边 //demo1.启动运行进行部署流程 @Test public void demo1() { RepositorySer...

activiti 工作流会签 / 多人审批时若一人通过即可

activiti 工作流会签时为所有的都审批通过才可进入下一环节： 1.编写监听类 public class MyTaksListener implements TaskListener { public void notify(DelegateTask delegateTask) { System.out.println("delegateTask.g

数据库的加锁操作

数据库的加锁操作从事一个项目，需要考虑数据的安全性，之前对于数据库这部分的数据操作学习的比较零散，由于手头的项目，于是系统的学习一个知识，我们大致都会经历这么几个过程（what this ? why to use ? how to use?），首先，我们需要搞懂，下面几个知识点：一：什么是数据库加锁？数据库加锁: 简单的意思就是对于在执行一个操作（比如修改）时，对这个操作的对象加...

公文转发流程自定义的数据建模

　　开发比较复杂的企业多用户管理信息系统(MIS)，不可能不涉及到系统内多个用户之间的数据文件的流转、审批等功能的开发。由于企业的需求总是随着时间推移不断发生变化，加之各个企业内部所设置的办公流程不尽相同，一套通用性比较好的管理信息系统应该能让系统管理员自己定义公文转发的流程。　　尽管笔者没有机会在已参与开发了的MIS中实现出文件转发流程自定义的功能，但是，早在2002年初就曾深入思考过这方面的设

工作流中实现一个节点多个节点的顺序审批

审批流程数据库设计

审批流程数据库设计结构图数据库表

流程审批数据库设计

workflow(流程表) 序号字段描述 1 wfid 2 wfname 流程名称 form(流程表单表) 序号字段描述 1 fid 2 ...

Activiti6+SpringBoot---一个角色多个人进行审批入门小案例

文章目录1. 设计流程图2. Bpmn文件3. 测试类3.1 部署启动流程3.2 完成请假单的提交3.3 获取该角色的所有审批人3.4 为审批人拾取任务3.5 完成任务 1. 设计流程图 2. Bpmn文件填写请假单：使用流程变量，指定当前登录的人未任务执行者项目经理审批：小于等于3天，为一个角色，可以有多个人可以进行审批，项目中设置为（王一，王二，王三）总经理审批：大于3天，只有一个总经理，指定一个人进行审批，项目中设置为（王大） <?xml version="1.0" encoding="

vue office在线编辑_钉钉文档协同编辑背后的核心技术原理

有人说，互联网给人类社会带来最深层次的变革是改变了人与人协作的方式，将信息传播的成本大幅降低。身在互联网行业之中，研究信息传播的方式方法，是我们的日常功课。信息传播的方式，按照时序效果，可分为同步和异步两类。信息的同步传播信息被生产的同时被消费。话出我之口，入你之耳，过了此时此刻，想还原此情此景，麻烦得很，大多时候也不需要。同步场景下，信息的生产往往不需要深思熟虑，而是通过你来我往的讨论...

2顶1踩