代码：

<!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. WPF 自定义CheckBox

    WPF中原始的CheckBox样式很简单,有时候不适用于WPF那种炫酷的界面. 本章节讲述如何设计一个匹配业务需要.好看的CheckBox(继上篇<WPF-自定义ListBox>中的Che ...

  2. ubuntu下安装lrzsz

    secureCRT中可以使用rz和sz命令上传和下载文件,可是这要linux中安装了lrzsz才可以.我用的时候无法使用apt-get自动安装,下面介绍手动安装的方法. 1 下载lrzsz软件  ht ...

  3. 理解 OpenStack 高可用（HA）（1）：OpenStack 高可用和灾备方案 [OpenStack HA and DR]

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  4. python爬虫学习 —— 总目录

    开篇 作为一个C党,接触python之后学习了爬虫. 和AC算法题的快感类似,从网络上爬取各种数据也很有意思. 准备写一系列文章,整理一下学习历程,也给后来者提供一点便利. 我是目录 听说你叫爬虫 - ...

  5. Struts2 Ajax校验

    Ajax(Asynchronous javascript and xml):异步刷新技术 技术组成:  CSS + xml +JavaScript +DOM Ajax核心对象: XMLHttpRequ ...

  6. bzoj[1087][SCOI2005]互不侵犯King

    Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包 ...

  7. WP-Cumulus插件

    链接: 5KB搞定wp-cumulus中文3D Tag问题 WordPress plugin: WP-Cumulus Flash based tag cloud WP-Cumulus支持的3D标签云实 ...

  8. 禁用datagridview中的自动排序功能

    把datagridview中的自动排序功能禁用自己收集的两种方法,看看吧①DataGridView中的Columns属性里面可以设置.进入"EditColumns"窗口后,在相应的 ...

  9. #1014 Trie树

    本题主要是求构造一棵Trie树,即词典树用于统计单词. C#代码如下: using System; using System.Collections.Generic; using System.Lin ...

  10. NB-IoT的相关资料整理（基本概念，技术优势，典型案例和当前的进展）

            人与人之间的通讯规模已近天花板,物与物的则刚刚进入增长快车道.随着可穿戴.车联网.智能抄表等新兴市场的开启,工业4.0.智慧城市.智慧农业等理念照进现实,万物互联的时代正加速到来. 一 ...