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

2顶
1踩

Web前端

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

2010-06-02 16:15 by 资深编辑 wutao0603 评论(0) 有7061人浏览
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 条 请登录后发表评论

发表评论

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

相关推荐

  • 多人审批功能简单实现

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

  • flowable多实例并行审核

    flowable多实例并行审核。

  • 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

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

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

  • 数据库的加锁操作

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

  • jbpm角色审批

    可分配是一个部门或角色组，也可以选择一个表达式操作，提交任务时可以根据权限过滤这个部门或组的用户中选择一个可操作用户 &amp;lt;task name=&quot;审核&quot;&amp;gt;             &amp;lt;assignment class=&quot;com.xxx.xxx.XXXAssignmentHandler&quot;&amp;gt;                &amp;lt;!-- &amp;lt;expression&amp;gt;user(...

  • Activiti6自学之路（十）——编码实现请假审批流程（完整过程）

    http://localhost:8008/spring-activiti/leave/deploy1 https://lucaslz.gitbooks.io/activiti-5-22/content/actge_property_ff08_shu_xing_shu_ju_biao_ff09.html

  • JBPM一个任务提交给多个人处理（以角色分配任务）

    1.新建工作流，代码：&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&amp;gt; &amp;lt;process name=&quot;test3&quot; xmlns=&quot;http://jbpm.org/4.4/jpdl&quot;&amp;gt; &amp;lt;start g=&quot;37,3,48,48&quot; name=&quot;start1&quot;&amp;gt; &

  • oa开发好转行吗_你也和ta一样，把工作流和OA搞混了吗？

    不久前在QQ群里，很多人在讨论工作流，其中一个人就问：你们知道哪家的工作流产品比较好吗？过一会有人回答：国内就xx和xx做得好点，但是价格太贵了。其实当时回答者说的两个品牌都是国内不错的OA商家，很显然，他把OA和工作流搞混了。OA是优化现有的管理组织结构，调整管理体制，在提高效率的基础上，增加协同办公能力，强化决策的一致性，最后实现提高决策效能的目的。而工作流是指“业务过程的部分或整体在计算机应...

  • c#工作流版之选择审批节点（4）

    当流程发起后，当前流程的审批环节基本确定。所以可以完成整改审批环节预览与相关审批节点调整。但在实际过程中，往往会在特定节点调整业务单据数据，如果业务单据一旦调整，将出现三种情况： 1).调整的数据与流转条件无关，流程继续流转。 2).调整的数据与流转条件直接相关，工作流引擎将自动重新计算审批路径完成自动修正。 3).调整的数据与流程使用场景有关，工作流引擎将限制现有流程继续使用。并给出要求换...

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

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

  • 批量审批功能的前端form表单ajax提交多文件多数据

    实现的功能： 勾选需要批量修改的信息，点击批量审批按钮，弹出一个用boostrap框架做的模态框，显示出勾选内容的信息，并且填写了内容，上传了多文件之后，通过ajax发送数据。 第一步：先获取选中项该行中需要的数据 //选中项的信息取出来 $('.checkone:checked').each(function () { flow...

  • 工作流 activiti 自定义下一审批人和多人会签的简单实现

    1.动态指定下一审批人 在这里我使用的是监听器模式 首先看整体的流程图 在需要动态指定审批人的节点上添加一个任务监听器 这是已经添加好的监听器 选择create 然后将需要使用的监听器路径写上。 java代码 package com.mlkj.modules.act.listener; import org.activiti.engine.delegate.Deleg...

  • 设置审批消息提醒

    需要有审批消息提醒的用户，可以在消息中心中自行设置，只针对本用户有效， 设置路径如下：消息中心--&gt;流程消息任务提醒控制--&gt;待办任务弹出框提醒(勾上)--&gt;保存 转载于:https://www.cnblogs.com/zouhuaxin/p/10131129.html...

Global site tag (gtag.js) - Google Analytics