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

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

第一种：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. php的opcache缓存扩展(php页面代码刷新速度)

    opcache (全程 zend opcache): 从php5.5开始,默认提供的php脚本缓存扩展,编译php5.5时加上参数--enable-opcache就可以编译opcache了,只是要启用 ...

  2. 推送未找到应用程序的“aps-environment”的权利字符串错误

    一:使用百度推送,或是苹果自带的推送出,才配置好anps-cer文件之后,出现错误 推送未找到应用程序的“aps-environment”的权利字符串错误 二:错误原因: 此原因是配置好推送证书之后, ...

  3. Project Euler 001-006 解法总结

    Problem 1. Find the sum of all the multiples of 3 or 5 below 1000.   题目要求找出所有1000以下的3或者5的倍数之和.   最简便 ...

  4. Hadoop HelloWord Examples -对Hadoop FileSystem进行操作 - 基于Java

    我之前对hadoop的各种文件操作都是基于命令行的,但是进阶后,经常需要直接从java的代码中对HDFS进行修改.今天来练习下. 一个简单的demo,将hdfs的一个文件的内容拷贝到另外hdfs一个文 ...

  5. QtGui.QComboBox

    The QtGui.QComboBox is a widget that allows a user to choose from a list of options. #!/usr/bin/pyth ...

  6. Android中如何判断升级用户

    借助PackageInfo 转自:http://blog.saymagic.cn/2016/05/31/howto-judge-update-user.html 由于上面两种自定义的逻辑都不能很好的满 ...

  7. Android APP安装后不在桌面显示图标的应用场景

    一般情况下是由于特殊情况下,需要隐藏app的启动入口,即在launcher界面不需要显示该入口,会由其他app跳转至.怎么设置如下代码: <activity android:name=" ...

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

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

  9. JAVA中的static方法

    static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何 ...

  10. nginx配置文件和一些用法

    fastcgi配置: location ~ \.php$ { #fastcgi_pass unix:///tmp/php-cgi.sock; fastcgi_pass unix__tmp_php5_c ...