代码：

<!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. 【Linux】Vim语法高亮显示

    配置vim 1. 安装vim2. 在hom创建文件.vimrc3. 修改.vimrc内容 syntax=on4. 打开vim,完成! 注: 预转的Vim(比如我现在的Linux Mint)不是完整版, ...

  2. 针对github权限导致hexo部署失败的解决方案

    hexo deplay出错,没有反应 今天想在自己的另一个博客地址(链接地址)上更新一下博客,没想到hexo deplay没有反应,以下是解决过程:(更新于 2016-12-24 11:17:43) ...

  3. GCC 中零长数组与变长数组

    前两天看程序,发现在某个函数中有下面这段程序: int n; //define a variable n int array[n]; //define an array with length n 在 ...

  4. 浅谈Tuple之C#4.0新特性那些事儿你还记得多少？

    来源:微信公众号CodeL 今天给大家分享的内容基于前几天收到的一条留言信息,留言内容是这样的: 看了这位网友的留言相信有不少刚接触开发的童鞋们也会有同样的困惑,除了用新建类作为桥梁之外还有什么好的办 ...

  5. NYOJ-858下三角矩阵

    下三角矩阵 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 给定一个由0和1组成的矩阵.只允许交换相邻的两行,要把矩阵转化成下三角矩阵(主对角线上方的元素都是0),最少需 ...

  6. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

  7. 第一个JAVA应用

    1.1创建源文件 1.1.1Java源文件结构 Java应用由一个或多个扩展名为“.Java”的文件构成,这些文件被成为源文件.从编译角度,则被称为编译单元(Compilation Unit). 如果 ...

  8. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  9. 可运行jar包的几种打包/部署方式

    java项目开发中,最终生成的jar,大概可分为二类,一类是一些通用的工具类(不包含main入口方法),另一类是可直接运行的jar包(有main入口方法),下面主要讲的是后者,要让一个jar文件可直接 ...

  10. Exception Handling引入MVP

    异常处理(Exception Handling)是所有系统的最基本的基础操作之一,其它的比如日志(Logging).审核(Auditing).缓存(Caching).事务处理(Transaction) ...