分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class="grid">
<div class="cell">
<div class="card">
<span class="spinner-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="throbber-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="refreshing-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="heartbeat-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="gauge-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="timer-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="three-quarters-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="wobblebar-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="atebits-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="whirly-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="flower-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="dots-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="circles-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="plus-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="ball-loader">Loading…</span>
</div>
</div>
<div class="cell">
<div class="card">
<span class="hexdots-loader">Loading…</span>
</div>
</div>
</div>

css代码:

        body
{
background: #f3f6f9;
font-family: sans-serif;
font-weight:;
font-size: 14px;
margin:;
padding: 20px;
}
.grid
{
overflow: hidden;
}
.cell
{
float: left;
width: 25%;
box-sizing: border-box;
padding: 20px;
display: table;
}
.card
{
background: white;
border: 1px solid #c3c6cf;
border-radius: 15px;
display: table-cell;
text-align: center;
vertical-align: middle;
height: 200px;
}
</style>

via:http://www.w2bc.com/Article/42264

16款纯CSS3实现的loading加载动画的更多相关文章

  1. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  2. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  3. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  4. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  5. 一款纯css3实现的机器人看书动画效果

    今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. ...

  6. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  7. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  8. QT自定义控件系列(二) --- Loading加载动画控件

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  9. CSS动画实例:Loading加载动画效果(一)

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

随机推荐

  1. shell小工具查看Hadoop中System.out输出的日志

    #!/bin/bashrm ~/log.logecho "Please Input JobID:"read NAMEmap_log="/home/grid/hadoop- ...

  2. sql server 2008评估期已到的解决办法

    点击开始-所有程序-Microsoft SQL Server 2008-配置工具-SQL Server 安装中心然后点击左侧的维护,在点击右侧的版本升级,接着按照提示一直点下一步,到产品密钥的时候输入 ...

  3. Could not connect to Redis at xxx.xxx.xxx.xxx:6379: Connection refused

    开发发来消息说测试环境的redis无法登录: # redis-cli -p 6379 -h xxx.xxx.xxx.xxx Could not connect to Redis at xxx.xxx. ...

  4. js中为什么你不敢用 “==”

    文章引用:http://0313.name/archives/480 前言 类型转换在各个语言中都存在,而在 JavaScript 中由于缺乏对其的了解而不慎在使用中经常造成bug被人诟病.为了避免某 ...

  5. 项目记录25--unity-tolua框架 View02---BasePanel.lua

    还在,还在. ... . 每天晚上找点时间写点点,多了也不想学到底是什么心理啊. 写完看电影去. 今天写两个算超完毕了BaseUI.lua,UIManager.lua(完好中这个) local Bas ...

  6. [转]python数据持久存储:pickle模块的基本使用

    python的pickle模块实现了基本的数据序列和反序列化.通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储:通过pickle模块的反序列化操作,我们能够从文件 ...

  7. SQL Server中判断字符串出现的位置及字符串截取

    首先建一张测试表: )); insert into teststring values ('张三,李四,王五,马六,萧十一,皇宫'); 1.判断字符串中某字符(字符串)出现的次数,第一次出现的位置最后 ...

  8. Mac笔记本安装mysql

    在浏览器当中输入地址:dev.mysql.com/downloads/mysql/,如下图所示:   进入以下界面,直接点击下面位置 ,选择跳过登录,点过这后直接下载,如下图所示:   下载完成后, ...

  9. macbook安装homebrew并更换清华源

    1.官网brew.sh复制安装脚本. 2.自动安装完成后,更换为清华源来加快速度.网址为:https://mirrors.tuna.tsinghua.edu.cn/help/homebrew 3.更换 ...

  10. vim7.4版本在windows下的配置文件及所在位置

    1.vim在windows下默认首先会查找"_vimrc"文件,如果没有则会找".vimrc".造成这个原因是windows早期不支持以点开头的文件及目录.2. ...