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

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

第一种：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. Flutter混合栈的管理

    Flutter出现的目的旨在统一Android/IOS两端编程,因此完全基于Flutter开发的App,只需提供一个包含FlutterView的页面,后续页面增加/删除/跳转均在FlutterView ...

  2. JSON格式校验

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. Autodesk FBX SDK Program 中文 (一)

    这是我的FBX SDK学习笔记.如文有错误.麻烦各位大大指出 为什么要使用FBX SDK? 由于3D建模软件都被AutoDesk收购了.FBX能够在各个建模软件之间互相导入导出,在非常多游戏引擎中也用 ...

  4. <续>调度算法补充

    cpmpute->executors: 1.从storm配置获取<compoent-id,parallelism>集合 2.storm-task-info 获得<task-id ...

  5. [Done]com.aerospike.client.AerospikeException: Error Code 12: Bin type error

    今天遇到了一个问题:com.aerospike.client.AerospikeException: Error Code 12: Bin type error 异常栈: 网上找了一些资料:https ...

  6. CentOS 6.3系统安装配置KVM虚拟机

      作业环境 服务器端 操作系统:CentOS 6.3 final x86_64 IP: 133.133.10.50 Hostname:myKVM KVM:qemu-kvm-0.12.1.2-2.29 ...

  7. 恢复阿里云RDS云数据库MySQL的备份文件到自建数据库

    云数据库MySQL版使用开源软件Percona Xtrabackup对数据库进行备份,所以您可以使用该软件将云数据库MySQL的备份文件恢复到自建数据库中,本文将介绍详细的操作步骤. 关于云数据库My ...

  8. perl: warning: Setting locale failed.

    本篇文章由:http://xinpure.com/perl-warning-setting-locale-failed/ 将 mac 系统切换成英文后,使用 git 命令出现如下错误: perl: w ...

  9. Android虚拟键盘弹出时挡住EditText解决方法

    在manifest的activity节点使用 Xml代码   <activity android:windowSoftInputMode="adjustResize"/> ...

  10. win7 下配置 java 环境变量[转]

    首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u7-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入“计算机 ...