代码：

<!doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <title>loading</title>

    <style>

        body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100vh; }

        .Loader { height: 30px; width: 90px; position: relative; }

            .Loader .Bar { background: #04C096; height: 0; position: absolute; bottom: 0; width: 10px; border-radius: 2px; }

                .Loader .Bar:nth-child(0) { left: -15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0s; animation: bottom-top 2s infinite ease-in-out 0s; }

                .Loader .Bar:nth-child(1) { left: 0px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.2s; animation: bottom-top 2s infinite ease-in-out 0.2s; }

                .Loader .Bar:nth-child(2) { left: 15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.4s; animation: bottom-top 2s infinite ease-in-out 0.4s; }

                .Loader .Bar:nth-child(3) { left: 30px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.6s; animation: bottom-top 2s infinite ease-in-out 0.6s; }

                .Loader .Bar:nth-child(4) { left: 45px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.8s; animation: bottom-top 2s infinite ease-in-out 0.8s; }

                .Loader .Bar:nth-child(5) { left: 60px; -webkit-animation: bottom-top 2s infinite ease-in-out 1s; animation: bottom-top 2s infinite ease-in-out 1s; }

                .Loader .Bar:nth-child(6) { left: 75px; -webkit-animation: bottom-top 2s infinite ease-in-out 1.2s; animation: bottom-top 2s infinite ease-in-out 1.2s; }

        @-webkit-keyframes bottom-top {

            0% { height: 0; opacity: 0; }

            50% { height: 30px; opacity: 1; }

            100% { height: 0; opacity: 0; }

        }

        @keyframes bottom-top {

            0% { height: 0; opacity: 0; }

            50% { height: 30px; opacity: 1; }

            100% { height: 0; opacity: 0; }

        }

    </style>

</head>

<body>

    <div class="Loader">

        <div class="Bar"></div>

        <div class="Bar"></div>

        <div class="Bar"></div>

        <div class="Bar"></div>

        <div class="Bar"></div>

        <div class="Bar"></div>

    </div>

</body>

</html>

来源：http://codepen.io/jackoliver/pen/ORpQBv

CSS3实现加载中效果的更多相关文章

  1. WPF防止界面卡死并显示加载中效果

    原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...

  2. 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

    在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...

  3. 纯CSS3技术 加载中

    你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html  <div class="loader">加载中...</div> css: 图( ...

  4. css3动画-加载中...

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...

  5. jQuery实现加载中效果,防止重复提交

    //导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...

  6. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  7. CSS3实现加载中的动画效果

    本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...

  8. Android 三种方式实现自定义圆形页面加载中效果的进度条

    转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...

  9. 【转】WPF防止界面卡死并显示加载中效果

    原文地址:http://www.cnblogs.com/linyijia/archive/2013/02/06/2900609.html <Window x:Class="Loadin ...

随机推荐

  1. html之长文本框置顶

    方法: 在<body> </body>中添加如下代码: <a name="top"></a> <a href="#t ...

  2. 3-2 bash 特性详解

    根据马哥Linux初级 3-2,3-3,编写 1. 文字排序 不影响源文件,只是显示根据ASCII码字符升序 nano的用法, 其实这个是生成一个文本,然后就可以在里面编辑. Ctrl + o, 后回 ...

  3. android 让一个Activity停留几秒后再跳转

    有时候我们需要在某个 Activity 停留几秒种,然后再跳到下一个 Activity.那么这个怎么实现呢? 一个方法是可以使用 Thread 的 sleep 函数,这个我们在 用Handler实现线 ...

  4. Neutron 理解 (7): Neutron 是如何实现负载均衡器虚拟化的 [LBaaS V1 in Juno]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  5. Nmap参数详解

    转自:http://blog.csdn.net/huangwwu11/article/details/20230795 Nmap--networkmapper,网络探测工具和安全/端口扫描器 nmap ...

  6. PAT 1041. 考试座位号(15)

    每个PAT考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考试座 ...

  7. php 时间加减

    <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d",time() ...

  8. 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

    has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集. 下面举一个例子: <ul& ...

  9. 如何破解.net软件

    .net sdk中有不少很强大的工具,可以轻易完成对.net程序的破解,只要你懂得一点IL语言就行.现在以一个 M 软件为例,介绍整个破解过程. 第零步:用反编译工具分析软件的可执行文件,制订破解逻辑 ...

  10. java8日期时间

    ###与时间有关的5个包* java.time* java.time.chrono* java.time.format* java.time.temporal* java.time.zone###ja ...