<style>
   @keyframes dot {
    0% { width: 0; }
    33% { width: .2em; }
    66% { width: .5em; }
    100% { width: .8em; }
}
   .dot {
    display: inline-block;
    width: 20px;
    vertical-align: bottom;
    overflow: hidden;
    -webkit-animation: dot 3s infinite step-start;
}
</style>
<button>提交</button>
<script src="jquery-2.1.1.min.js"></script>
<script>
$("button").click(function(){
$(this).html("处理中<span class='dot'>...<span>")
setTimeout(function(){
alert("网络慢...")
},10000)
})
</script>

animation渐进实现点点点等待效果的更多相关文章

  1. animation渐进实现点点点等待效果实例页面

    CSS代码: .ani_dot { font-family: simsun; } :root .ani_dot { display: inline-block; width: 1.5em; verti ...

  2. 三种CSS方法实现loadingh点点点的效果

    我们在提交数据的时候,在开始提交数据与数据提交成功之间会有一段时间间隔,为了有更好的用户体验,我们可以在这个时间段添加一个那处点点点的动画,如下图所示: 汇总了一下实现这种效果主要有三种方法: 第一种 ...

  3. C#.Net网页加载等待效果漂亮并且简单

    最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码:    protected void Pa ...

  4. WPF 实现的等待效果界面

    这个界面的效果是从WinForm 转变过来,可以实现等待的效果,操作完成以后就自动关掉. 效果图如下 有一个动态的手机等待效果的样式,中间的文字可以自己定义,提供了方法可以修改中间"正在加载 ...

  5. 手机站全局的html+css加载等待效果

    本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...

  6. js加载等待效果

    demo01: 加载首页的时候,可能会很缓慢,放一张等待图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ...

  7. [WPF] 圆形等待效果

    原文:[WPF] 圆形等待效果 自己做着玩儿的,留着以后用,效果类似下面的 GIF 动画. <Grid Width="35" Height="35"> ...

  8. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  9. 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解

    什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...

随机推荐

  1. Selenium - 搭建环境

    1. 在Python中安装第三方库 1)安装Selenium 通过pip安装   2). 下载geckodriverckod 从selenium3开始,webdriver/firefox/webdri ...

  2. Java面向对象 第3节 类的封装和继承

      一.封装 封装的概念:将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的访问和操作. 封装的2个大致原则:1)把尽可能多的东西隐藏起来,对外提供便捷的接口 ...

  3. 第2章 Java基本语法(上): 变量与运算符

    2-1 关键字与保留字 关键字(keyword) 保留字(reserved word) 2-2 标识符(Identifier) 案例 class Test{ public static void ma ...

  4. 【转】剖析异步编程语法糖: async和await

    一.难以被接受的async 自从C#5.0,语法糖大家庭又加入了两位新成员: async和await. 然而从我知道这两个家伙之后的很长一段时间,我甚至都没搞明白应该怎么使用它们,这种全新的异步编程模 ...

  5. ajax请求完成执行的操作

    var createAjax = $("#createId").ajax(function(){ //ajax操作 }); $.when(createAjax).done(func ...

  6. Delphi XE4 For IOS之部署问题

    在XE4中编写完程序后,怎么把相应的文件部署到ios虚拟机和真实机子中呢?下面就来说说. 首先选择你要部署的项目,选择Project->Deployment菜单 Deployment菜单打开如下 ...

  7. xterm下字体设置

    code ~/.Xdefaults xterm*locale: true xterm.utf8: true xterm*utf8Title: true ! 滚动条 !XTerm*scrollBar: ...

  8. 黄聪:xampp启动后mysql报Error

    2013-08-04 13:48:22 760 [ERROR] InnoDB: Attempted to open a previously opened tablespace. Previous t ...

  9. Verilog HDL中的运算符关系

    1,位运算符 按位运算的运算符是位运算符,原来的操作数有几位,结果就有几位,若两个操作数位数不同,则位数短的操作数左端会自动补0. (1),按位取反:~ (2),按位与:& (3),按位或:| ...

  10. 京东返利渠道,自己拿返利,无需A推B操作

    京东返利渠道,自己拿返利,无需A推B操作,简单快捷方便 1.在微信小程序中搜索 “京东饭粒” 2.进入京东饭粒,进购物车下单(只能在购物车内下单返利) 3.收货后26天返京豆到你的京东账号中,”佛系返 ...