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

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

第一种：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. centos下docker网络桥接

    停止服务 停止docker0网卡 Ip link set dev docker0 down 删除docker0 Brctl delbr docker0 进入到网卡的配置文件创建桥接网络br0 Brct ...

  2. FFMPEG中最要害的结构体之间的关系

    FFMPEG中最关键的结构体之间的关系 http://www.myexception.cn/program/1404591.html FFMPEG中结构体很多.最关键的结构体可以分成以下几类: a)  ...

  3. function(window, undefined)的意义

    var num = 10000 for (var i = 0; i++; i < num) { eval("pp" + i + "=" + i); } ( ...

  4. Mysql InnoDB锁

    MySQL 不同引擎的锁机制: MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-leve locking)或表级锁,默认为页面锁 InnoD ...

  5. [Swift A] - Using Swift with Cocoa and Objective-C--Mix and Match

    Swift与Objective-C的兼容能力允许你在同一个工程中同时使用两种语言.你可以用这种叫做“mix and match”的特性来开发基于混合语言的应用.使用Swfit的最新特性--“mix a ...

  6. 浅析CentOS和RedHat Linux的区别(转）

    CentOS的简介 CentOS是Community ENTerprise Operating System的简称,我们有很多人叫它社区企业操作系统,不管你怎么叫它,它都是Linux操作系统的一个发行 ...

  7. 【BIEE】安装好BIEE后，修改默认登录页面不为QuickStart页面

    已经安装好了BIEE,但是发布了自己的资料库后,默认的登录页面为QuickStart,导致已登录就看到错误页面 现在进行如下修改即可 点击登录身份后的名字,例如我的是weblogic 选择[我的账户] ...

  8. JDBC 元数据信息 getMetaData()

    数据库元数据信息: import java.sql.DatabaseMetaData; import java.sql.DriverManager; import java.sql.SQLExcept ...

  9. iOS-开发者相关的几种证书(转)

    分享一篇关于苹果开发者证书非常详细的解释. 哈哈,我太懒了,直接转发链接. iOS-开发者相关的几种证书

  10. 求子数组的最大和要求O(n)

    //求子数组的最大和 //输入一个整形数组.有整数也有负数,数组中连续一个或多个子数组,每一个子数组都有一个和,求全部子数组的和的最大值,要求时间复杂度O(n) #include<iostrea ...