资讯频道 → Web前端
阅读更多

2顶
1踩

Web前端

翻译新闻 使用CSS3 ，创建Ajax加载动画

2010-06-02 16:15 by 资深编辑 wutao0603 评论(0) 有7054人浏览
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;}

}

 

点击查看更多详情：http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

 

  • 大小: 17.5 KB
  • 大小: 3.5 KB
2
顶
1
踩
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

  • 审批管理系统

    针对某些流程进行拦截审批

  • flowable 添加临时任务或子流程

    flowable 6.0动态添加用户任务或子流程

  • Flowable-子流程-嵌套子流程

    内嵌子流程又叫嵌入式子流程，它是一个可以包含其它活动、分支、事件，等的活动。我们通常意义上说的子流程通常就是指的内嵌子流程，它表现为将一个流程（子流程）定义在另一个流程（父流程）的内部，子流程作为父流程的一部分。子流程是主流程中的一部分流程片段，并非独立的流程定义，一般作为局部通用逻辑处理，或者因为特定业务需要，使比较复杂的单个主流程设计清晰直观。

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

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

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

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

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

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

  • flowable子流程实现

    flowable子流程 即在主流程之外去执行一个小的流程 注子流程可以套子流程 以下的我实现的流程图: 以下是我的BPMN2.0的XML: &amp;lt;process id=&quot;XMSubProcessUS&quot; name=&quot;TestsubProcessUS&quot; isExecutable=&quot;true&quot;&amp;gt; &amp;lt;documentation&amp;gt;子流程&amp;lt;/documentat...

  • 【Flowable】Flowable任务分配和流程变量

    【Flowable】Flowable任务分配和流程变量

  • flowable之回调活动（子流程）

    当流程执行到达调用活动时，会创建一个新的执行，作为到达调用活动的执行的子执行。这个子执行用于执行子流程，也可用于创建并行子执行（与普通流程中行为类似）。尽管看起来很相像，但在BPMN 2.0中，调用活动（call activity）有别于一般的子流程——通常也称作嵌入式子流程。从概念上说，两者都在流程执行到达该活动时，调用一个子流程。两者的区别为，调用活动引用一个流程定义外部的流程，而子流程嵌入在原有流程定义内。调用活动的主要使用场景是，在多个不同流程定义中调用一个可复用的流程定义。

  • Flowable入门系列文章61 - 呼叫活动（子流程）

    flowable入门、flowable现状、flowable开源产品、flwoable入门系列、flowable课程、flowable与activiti区别 Flowable是用Java编写的轻量级业务流程引擎。Flowable流程引擎允许您部署BPMN 2.0流程定义（用于定义流程的行业XML标准），创建 流程定义的流程实例，运行查询，访问活动或历史流程实例以及相关数据等等。本节将逐步介绍各种概念和API，通过您可以在自己的开发 机器上进行的实例进行实现。

  • 数据库的加锁操作

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

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

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

  • Activiti实现并行多实例中每个实例可以多人审批，一人审批通过一个实例即通过

    activiti多实例任务设置候选人组 需求场景：任务节点为多实例，该节点有多个分支，每个分支必须同时通过才算任务结束，每个分支可以有多个人审批，分之中一个人审批通过就算给分支通过。但是又不想用任务候选组的方式来完成该任务， 任务视图： 任务草图 多实例中设置Multi Instance,Collection:assigneeList;Element Variable :assignee 然后在...

  • 审批流程数据库设计

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

  • flowable 6.4.2 - 流程定义动态化的支持（DynamicBpmnService）

    1、injectParallelUserTask --- 给《任务实例》加入《子任务》 2、injectParallelEmbeddedSubProcess --- 给《任务实例》加入《子流程》 3、injectUserTaskInProcessInstance --- 给《流程实例》加入《子任务》 4、injectEmbeddedSubProcessInProcessInstance --- 给《流程实例》加入《子流程》 . // injectParallelUserTask --- 给《任务实例

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

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

  • 基于python3.7和django2.1的多人博客系统。

    基于python3.7和django2.1的多人博客系统 github地址：https://github.com/opsonly,喜欢的可以给个star~ 简介： 该博客前段框架使用了Bootstrap 4，在其基础上添加了一些自己需要用的css样式，后端使用django2.1。 由于自己也在摸索中，新入门django的人拿来练手再合适不过，我也会继续完善此项目的功能。觉得有用的可以关注收...

  • flowable工作流之手动任务

    flowable手动任务的作用挺简单,就是提供一个你不需要处理节点,你可以在这个节点里预处理一些东西.xml文件里是一个manualTask节点. &lt;manualTask id="myManualTask" name="Call client for more information" /&gt; 官方文档有个描述: 手动任务（manual task）定义在BPM引擎之外的任务。它用于建模引擎不需要了解，也不需要提供系统或用户界面的工作。对于引擎来说，手动任务将按直接穿过活动处理，在..

Global site tag (gtag.js) - Google Analytics