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

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

第一种：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. java对象的强引用，软引用，弱引用和虚引用

    1．强引用 以前我们使用的大部分引用实际上都是强引用,这是使用最普遍的引用.如果一个对象具有强引用,那就类似于必不可少的生活用品,垃圾回收器绝不会回收它.当内存空 间不足,Java虚拟机宁愿抛出Out ...

  2. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  3. Sublime key

    -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...

  4. Android源代码目录结构（转）

    https://android.googlesource.com/ Android 2.2 |-- Makefile |-- bionic               (bionic C库) |-- ...

  5. 【微信支付】公众号、商户基础配置和流程（包括设置支付授权目录、测试支付目录和白名单、JS接口安全域名、授权回调域名等）

    一.使用场景以及说明 使用场景:商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 说明:1.用户打开图文消息或者扫描二维码,在微信内置浏览器打开网 ...

  6. MySQL-安全对调两个表名

    我们想要的是同时完成表名对调,如果是先后的对掉,用RENAME的话可能会导致有些数据写入失败,那怎么办? 其实也不难,从MySQL手册里就能找到方法,那就是:同时锁定2个表,不允许写入,然后对调表名. ...

  7. 【LeetCode】96. Unique Binary Search Trees (2 solutions)

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  8. hdu 1022 Train Problem I（栈的应用+STL)

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. 解决Enter键与input 、a标签触发的事件的冲突

    无论是 <button type="button" onclick="console.log('123');">123</button> ...

  10. JVM虚拟机（五）：JDK8内存模型—消失的PermGen

    一.JVM 内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 1.虚拟机栈: 每个线程有一个私有的栈,随着线程的创建而创建.栈里面存着的是一种叫“ ...