我们在提交数据的时候，在开始提交数据与数据提交成功之间会有一段时间间隔，为了有更好的用户体验，我们可以在这个时间段添加一个那处点点点的动画，如下图所示：

汇总了一下实现这种效果主要有三种方法：

第一种：box-shadow + animate;

第二种：animate;

第三种：等宽字体 + animate

具体代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>实现loadingh点点点的效果</title>

        <style type="text/css">

            /* box-shadow+animate方法  */

            .shadow_dot {

                display: inline-block; min-width: 2px; min-height: 2px;

                box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;

                -webkit-animation: shadow_dot 4s infinite step-start both;

                animation: shadow_dot 4s infinite step-start both;

                *zoom: expression(this.innerHTML = '...'); /* IE7 */

            }

            .shadow_dot:before { content: '...'; } /* IE8 */

            .shadow_dot::before { content: ''; }

            :root .shadow_dot { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */

            @-webkit-keyframes shadow_dot {

                25% { box-shadow: none; }

                50% { box-shadow: 2px 0 currentColor; }

                75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }

            }

            @keyframes shadow_dot {

                25% { box-shadow: none; }

                50% { box-shadow: 2px 0 currentColor; }

                75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }

            }

            /* animate方法  */

            .ani_dot {

                font-family: simsun;

            }

            :root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/

                display: inline-block;

                width: 1.5em;

                vertical-align: bottom;

                overflow: hidden;

            }

            @-webkit-keyframes dot {

                0% { width: 0; margin-right: 1.5em; }

                33% { width: .5em; margin-right: 1em; }

                66% { width: 1em; margin-right: .5em; }

                100% { width: 1.5em; margin-right: 0;}

            }

            .ani_dot {

                -webkit-animation: dot 3s infinite step-start;

            }

            @keyframes dot {

                0% { width: 0; margin-right: 1.5em; }

                33% { width: .5em; margin-right: 1em; }

                66% { width: 1em; margin-right: .5em; }

                100% { width: 1.5em; margin-right: 0;}

            }

            .ani_dot {

                animation: dot 3s infinite step-start;

            }

             /* 等宽字体+animate方法  */

            dot {

                display: inline-block;

                width: 3ch;

                text-indent: -1ch;

                vertical-align: bottom;

                overflow: hidden;

                animation: dot 3s infinite step-start both;

                /* 等宽字体很重要 */

                font-family: Consolas, Monaco, monospace;

            }

            @keyframes dot {

                33% { text-indent: 0; }

                66% { text-indent: -2ch; }

            }   

		</style>

	</head>

	<body>

        <h3>利用box-shadow实现：</h3>

		<div>

			数据提交中<span class="shadow_dot"></span>

        </div>

        <h3>animate方法：</h3>

        <div>

            数据提交中<span class="ani_dot">...</span>

        </div>

        <h3>等宽字体+animate方法：</h3>

		<div>

			数据提交中<span>...</span>

        </div>

	</body>

</html>

大家可以自己动手实践一下~~

这三种方法来源地址如下：

再说CSS3 animation实现点点点loading动画

小tip: CSS3 animation渐进实现点点点等待提示效果

等宽字体在web布局中应用以及CSS3 ch单位嘿嘿

三种CSS方法实现loadingh点点点的效果的更多相关文章

  1. Liunx 环境下vsftpd的三种实现方法（超详细参数）

    以下文章介绍Liunx 环境下vsftpd的三种实现方法 ftp://vsftpd.beasts.org/users/cevans/vsftpd-2.0.3.tar.gz,目前已经到2.0.3版本.假 ...

  2. javase-常用三种遍历方法

    javase-常用三种遍历方法 import java.util.ArrayList; import java.util.Iterator; import java.util.List; public ...

  3. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. Java中Map的三种遍历方法

    Map的三种遍历方法: 1. 使用keySet遍历,while循环: 2. 使用entrySet遍历,while循环: 3. 使用for循环遍历.   告诉您们一个小秘密: (下↓面是测试代码,最爱看 ...

  5. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  6. spring与mybatis三种整合方法

    spring与mybatis三种整合方法 本文主要介绍Spring与Mybatis三种常用整合方法,需要的整合架包是mybatis-spring.jar,可通过链接 http://code.googl ...

  7. C#使用DataSet Datatable更新数据库的三种实现方法

    本文以实例形式讲述了使用DataSet Datatable更新数据库的三种实现方法,包括CommandBuilder 方法.DataAdapter 更新数据源以及使用sql语句更新.分享给大家供大家参 ...

  8. struts2拦截器interceptor的三种配置方法

    1.struts2拦截器interceptor的三种配置方法 方法1. 普通配置法 <struts> <package name="struts2" extend ...

  9. selenium webdriver三种等待方法

    webdriver三种等待方法 1.使用WebDriverWait from selenium import webdriverfrom selenium.webdriver.common.by im ...

随机推荐

  1. C#基础视频教程6.3 如何简单读写数据库

    在继续往下做之前,我们需要把之前的代码尽可能的精简(会对后面很有好处,而且读者也应该仔细比对这一部分的代码和上一部分哪里真正得到了优化,从而提高编程水平). 首先数据库的操作类有哪些是可以做的更加普遍 ...

  2. es5 - array - concat

    /** * 描述:数组元素合并 * 使用:arr1.concat(arr2) * 参数:arr1.concat(arr2,arr3,arr...) * 说明: * 该concat方法创建一个新数组,该 ...

  3. Asp.Net Web Api 图片上传

    public string UploadFile()        {            if (Request.Content.IsMimeMultipartContent())         ...

  4. jsp简单实现统计在线人数

    通过重写HttpSessionListener接口实现 //session操作类 public class SessionMap { private static Map<String,Http ...

  5. “好奇号”火星车和它搭载的软件(来自Erlang程序员的观点)

    http://www.aqee.net/on-curiosity-and-its-software/

  6. Linux命令-权限管理命令:chown

    选项:-R 处理指定目录以及其子目录下的所有文件 useradd wangyunpeng 创建一个用户名为wangyunpeng的用户 passwd wangyunpeng 给wangyunpeng这 ...

  7. public static void main(String args[])什么意思？

    public static void main(String[] args) 这绝对不是凭空想出来的,也不是没有道理的死规定,而是java程序执行的需要. jvm在试图运行一个类之前,先检查该类是否包 ...

  8. [bug]未能从程序集“System.ServiceModel, Version=3.0.0.0问题解决

    在Windows Server 2008中的IIS服务器中部署WCF服务程序时,通过浏览器访问报出如下错误: 未能从程序集“System.ServiceModel, Version=3.0.0.0, ...

  9. 引用、数组引用与指针引用、内联函数inline、四种类型转换运算符

    一.引用 (1).引用是给一个变量起别名 定义引用的一般格式:类型  &引用名 ＝ 变量名: 例如:int a=1;  int  &b=a;// b是a的别名,因此a和b是同一个单元 ...

  10. 简洁经常使用权限系统的设计与实现(一):构造权限菜单树的N(N&gt;=4)种方法

    权限系统.Web开发常见标准子系统之中的一个.结合自己的一些思考和实践,从本篇開始权限系统的设计与实现之路. 近期,重构了项目的权限菜单构造过程,向前端返回json格式的权限树. 这一篇.仅仅是大致介 ...