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

在线预览   源码下载

实现的代码。

html代码:

  1. <div class="grid">
  2. <div class="cell">
  3. <div class="card">
  4. <span class="spinner-loader">Loading…</span>
  5. </div>
  6. </div>
  7. <div class="cell">
  8. <div class="card">
  9. <span class="throbber-loader">Loading…</span>
  10. </div>
  11. </div>
  12. <div class="cell">
  13. <div class="card">
  14. <span class="refreshing-loader">Loading…</span>
  15. </div>
  16. </div>
  17. <div class="cell">
  18. <div class="card">
  19. <span class="heartbeat-loader">Loading…</span>
  20. </div>
  21. </div>
  22. <div class="cell">
  23. <div class="card">
  24. <span class="gauge-loader">Loading…</span>
  25. </div>
  26. </div>
  27. <div class="cell">
  28. <div class="card">
  29. <span class="timer-loader">Loading…</span>
  30. </div>
  31. </div>
  32. <div class="cell">
  33. <div class="card">
  34. <span class="three-quarters-loader">Loading…</span>
  35. </div>
  36. </div>
  37. <div class="cell">
  38. <div class="card">
  39. <span class="wobblebar-loader">Loading…</span>
  40. </div>
  41. </div>
  42. <div class="cell">
  43. <div class="card">
  44. <span class="atebits-loader">Loading…</span>
  45. </div>
  46. </div>
  47. <div class="cell">
  48. <div class="card">
  49. <span class="whirly-loader">Loading…</span>
  50. </div>
  51. </div>
  52. <div class="cell">
  53. <div class="card">
  54. <span class="flower-loader">Loading…</span>
  55. </div>
  56. </div>
  57. <div class="cell">
  58. <div class="card">
  59. <span class="dots-loader">Loading…</span>
  60. </div>
  61. </div>
  62. <div class="cell">
  63. <div class="card">
  64. <span class="circles-loader">Loading…</span>
  65. </div>
  66. </div>
  67. <div class="cell">
  68. <div class="card">
  69. <span class="plus-loader">Loading…</span>
  70. </div>
  71. </div>
  72. <div class="cell">
  73. <div class="card">
  74. <span class="ball-loader">Loading…</span>
  75. </div>
  76. </div>
  77. <div class="cell">
  78. <div class="card">
  79. <span class="hexdots-loader">Loading…</span>
  80. </div>
  81. </div>
  82. </div>

css代码:

  1. body
  2. {
  3. background: #f3f6f9;
  4. font-family: sans-serif;
  5. font-weight:;
  6. font-size: 14px;
  7. margin:;
  8. padding: 20px;
  9. }
  10. .grid
  11. {
  12. overflow: hidden;
  13. }
  14. .cell
  15. {
  16. float: left;
  17. width: 25%;
  18. box-sizing: border-box;
  19. padding: 20px;
  20. display: table;
  21. }
  22. .card
  23. {
  24. background: white;
  25. border: 1px solid #c3c6cf;
  26. border-radius: 15px;
  27. display: table-cell;
  28. text-align: center;
  29. vertical-align: middle;
  30. height: 200px;
  31. }
  32. </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. dbms_random.seed

    语法: DBMS_RANDOM.SEED ( val IN BINARY_INTEGER); DBMS_RANDOM.SEED ( val IN VARCHAR2); val: Seed number ...

  2. MySQL-innodb_flush_log_at_trx_commit

    有效取值为0.1.2.建议设置为1 -1:执行commit的时将重做日志缓冲区同步写到磁盘,即伴有fsync调用 -2:执行commit的时将重做日志异步写到磁盘,即先写到文件系统的缓冲中(因为文件系 ...

  3. c#asp.net url 传递中文参数要使用 System.Web.HttpUtility.UrlEncode 而不能使用Server.UrlEncode

    最近网站里的参数包括中文的例如: http://www.taiba/Tag%b0%ae%c7%e9.html 已开始使用 Server.UrlEncode来做的,但发现,有一些中文在url重写的是说找 ...

  4. 一个Demo带你彻底掌握View的滑动冲突

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 近期在又一次学习Android自己定义View这一块的内容.遇到了平时开发中常常碰到的一个棘手问题:View的滑 ...

  5. java时区转化相关工具方法

    import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date;import java. ...

  6. flock防止crontab脚本周期内未执行完重复执行(转)

    如果某脚本要运行30分钟,可以在Crontab里把脚本间隔设为至少一小时来避免冲突.而比较糟的情况是可能该脚本在执行周期内没有完成,接着第二个脚本又开始运行了.如何确保只有一个脚本实例运行呢?一个好用 ...

  7. 史上最简单的 GitHub 教程

    史上最简单的 GitHub 教程 温馨提示:本系列博文已经同步到 GitHub,如有需要的话,欢迎大家到「github-tutorial」进行Star和Fork操作! 1 简介 GitHub 是一个面 ...

  8. flowable 中task的相关操作

    1 获取任务列表 1)获取候选人的任务列表 TaskService taskService = processEngine.getTaskService(); List<Task> tas ...

  9. 双系统(win8.1+ubuntu14.04)删除win下分区导致grub rescue解决方案

    几个grub rescue下的命令的含义: set 设置环境变量 ls 查看设备 insmod 加载模块 root 指定用于启动系统的分区 prefix 设定grub启动路径 操作流程: 1.  先使 ...

  10. js判断是否IE浏览器

    //ie? if (!!window.ActiveXObject || "ActiveXObject" in window){ //是 alert(1); }else{ //不是 ...