代码：

<!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. awk-实践

    实际中遇到的问题 字符串截取函数 substr #!/usr/bin/awk #author:zhaoyingnan #filename:substr.awk #substr 函数 #|awk -f ...

  2. monkeyrunner之坐标或控件ID获取方法（六）

    Monkeyrunner的环境已经搭建完成,现在对Monkeyrunner做一个简介. Monkeyrunner工具提供了一套API让用户/测试人员来调用,调用这些api可以控制一个Android设备 ...

  3. UVALive - 4108 SKYLINE[线段树]

    UVALive - 4108 SKYLINE Time Limit: 3000MS     64bit IO Format: %lld & %llu Submit Status uDebug ...

  4. 国内外前端(js)开发框架对比

    国内外前端开发框架对比 首先我们先对目前国内外主流前端开发框架做一个基本的了解,之后再对他们进行一个直观的对比. Bootstrap Bootstrap(http://www.bootcss.com) ...

  5. java多线程系类：JUC线程池：03之线程池原理（二）（转）

    概要 在前面一章"Java多线程系列--"JUC线程池"02之 线程池原理(一)"中介绍了线程池的数据结构,本章会通过分析线程池的源码,对线程池进行说明.内容包 ...

  6. JavaScript中两种类型的全局对象/函数

    这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...

  7. Echarts Map地图类型使用

    使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...

  8. margin-top无效的问题解决方法

    今天碰到了margin-top无效的问题,解决方法也有很多一行代码就解决了 解决办法: 1.设置父元素或者自身的display:inline-block;(IE6.IE7不识别inline-block ...

  9. 微信内嵌html5页面清楚缓存

    给每个js添加一个版本号,每次修改js后改变一下版本号,浏览器即可自动刷新不用手动清理缓存 <script src="<%=path%>/js/boss/kpi/redli ...

  10. 杂谈 Taglib、EL、OGNL

    本篇主要是自己对 JavaWeb中 EL.OGNL.Taglib 个人理解. 因为以上内容都是在 JSP 的基础下产生的概念, 首先得说说我眼中的 JSP. 她自由的.奔放的,就像辽阔的大海,跨越任何 ...