16款纯CSS3实现的loading加载动画
分享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加载动画的更多相关文章
- 纯css3实现的win8加载动画
今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- 一款纯css3实现的机器人看书动画效果
今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 原生JS+ CSS3创建loading加载动画;
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- QT自定义控件系列(二) --- Loading加载动画控件
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- CSS动画实例:Loading加载动画效果(一)
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
随机推荐
- dbms_random.seed
语法: DBMS_RANDOM.SEED ( val IN BINARY_INTEGER); DBMS_RANDOM.SEED ( val IN VARCHAR2); val: Seed number ...
- MySQL-innodb_flush_log_at_trx_commit
有效取值为0.1.2.建议设置为1 -1:执行commit的时将重做日志缓冲区同步写到磁盘,即伴有fsync调用 -2:执行commit的时将重做日志异步写到磁盘,即先写到文件系统的缓冲中(因为文件系 ...
- c#asp.net url 传递中文参数要使用 System.Web.HttpUtility.UrlEncode 而不能使用Server.UrlEncode
最近网站里的参数包括中文的例如: http://www.taiba/Tag%b0%ae%c7%e9.html 已开始使用 Server.UrlEncode来做的,但发现,有一些中文在url重写的是说找 ...
- 一个Demo带你彻底掌握View的滑动冲突
本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 近期在又一次学习Android自己定义View这一块的内容.遇到了平时开发中常常碰到的一个棘手问题:View的滑 ...
- java时区转化相关工具方法
import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date;import java. ...
- flock防止crontab脚本周期内未执行完重复执行(转)
如果某脚本要运行30分钟,可以在Crontab里把脚本间隔设为至少一小时来避免冲突.而比较糟的情况是可能该脚本在执行周期内没有完成,接着第二个脚本又开始运行了.如何确保只有一个脚本实例运行呢?一个好用 ...
- 史上最简单的 GitHub 教程
史上最简单的 GitHub 教程 温馨提示:本系列博文已经同步到 GitHub,如有需要的话,欢迎大家到「github-tutorial」进行Star和Fork操作! 1 简介 GitHub 是一个面 ...
- flowable 中task的相关操作
1 获取任务列表 1)获取候选人的任务列表 TaskService taskService = processEngine.getTaskService(); List<Task> tas ...
- 双系统(win8.1+ubuntu14.04)删除win下分区导致grub rescue解决方案
几个grub rescue下的命令的含义: set 设置环境变量 ls 查看设备 insmod 加载模块 root 指定用于启动系统的分区 prefix 设定grub启动路径 操作流程: 1. 先使 ...
- js判断是否IE浏览器
//ie? if (!!window.ActiveXObject || "ActiveXObject" in window){ //是 alert(1); }else{ //不是 ...