最近项目中要实现当页面还没有加载完给用户提示正在加载的loading，本来是想做个图片提示的，但是图片如果放大电脑的分辨率就会感觉到很虚，体验效果很不好。于是就采用css3+js实现这个loading的动画效果，最终在我们前端工程师的帮助之下完成。所以记录在这里，如果感兴趣的朋友也可以看看，大家互相焦炉学习。

1、demo.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta charset="utf-8">
  7.  
  8. <link rel="stylesheet" type="text/css" href="./loaders.css">
  9. <title>纯css3 加载loading动画特效</title>
  10.  
  11. </head>
  12. <body>
  13.  
  14. <style>
  15. body{width:100%;height:100%;margin:0;}
  16. .fuceng{position:absolute;width:100%;height:100%;margin:0;}
  17. .loading{margin-left: 50%; margin-top:20%;}
  18. </style>
  19.  
  20.  <div>
  21. 	<div class="fuceng">
  22.       <div class="loading">
  23.         <div class="loader-inner line-spin-fade-loader">
  24.           <div></div>
  25.           <div></div>
  26.           <div></div>
  27.           <div></div>
  28.           <div></div>
  29.           <div></div>
  30.           <div></div>
  31.           <div></div>
  32.         </div>
  33.       </div>
  34.  	</div>
  35. </body>
  36. </html>

2、loaders.css

  1. /**
  2.  *
  3.  * All animations must live in their own file
  4.  * in the animations directory and be included
  5.  * here.
  6.  *
  7.  */
  8. /**
  9.  * Styles shared by multiple animations
  10.  */
  11. /**
  12.  */
  13. .ball-spin-fade-loader {
  14.   position: relative; }
  15.   .ball-spin-fade-loader > div:nth-child(1) {
  16.     top: 25px;
  17.     left: 0;
  18.     -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
  19.             animation: ball-spin-fade-loader 1s 0s infinite linear; }
  20.   .ball-spin-fade-loader > div:nth-child(2) {
  21.     top: 17.04545px;
  22.     left: 17.04545px;
  23.     -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
  24.             animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  25.   .ball-spin-fade-loader > div:nth-child(3) {
  26.     top: 0;
  27.     left: 25px;
  28.     -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
  29.             animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  30.   .ball-spin-fade-loader > div:nth-child(4) {
  31.     top: -17.04545px;
  32.     left: 17.04545px;
  33.     -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
  34.             animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  35.   .ball-spin-fade-loader > div:nth-child(5) {
  36.     top: -25px;
  37.     left: 0;
  38.     -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
  39.             animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  40.   .ball-spin-fade-loader > div:nth-child(6) {
  41.     top: -17.04545px;
  42.     left: -17.04545px;
  43.     -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
  44.             animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  45.   .ball-spin-fade-loader > div:nth-child(7) {
  46.     top: 0;
  47.     left: -25px;
  48.     -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
  49.             animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  50.   .ball-spin-fade-loader > div:nth-child(8) {
  51.     top: 17.04545px;
  52.     left: -17.04545px;
  53.     -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
  54.             animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  55.   .ball-spin-fade-loader > div {
  56.     background-color: #279fcf;
  57.     width: 15px;
  58.     height: 15px;
  59.     border-radius: 100%;
  60.     margin: 2px;
  61.     -webkit-animation-fill-mode: both;
  62.             animation-fill-mode: both;
  63.     position: absolute; }
  64.  
  65. @-webkit-keyframes line-spin-fade-loader {
  66.   50% {
  67.     opacity: 0.3; }
  68.  
  69.   100% {
  70.     opacity: 1; } }
  71.  
  72. @keyframes line-spin-fade-loader {
  73.   50% {
  74.     opacity: 0.3; }
  75.  
  76.   100% {
  77.     opacity: 1; } }
  78.  
  79. .line-spin-fade-loader {
  80.   position: relative; }
  81.   .line-spin-fade-loader > div:nth-child(1) {
  82.     top: 20px;
  83.     left: 0;
  84.     -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
  85.             animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }
  86.   .line-spin-fade-loader > div:nth-child(2) {
  87.     top: 13.63636px;
  88.     left: 13.63636px;
  89.     -webkit-transform: rotate(-45deg);
  90.         -ms-transform: rotate(-45deg);
  91.             transform: rotate(-45deg);
  92.     -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
  93.             animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }
  94.   .line-spin-fade-loader > div:nth-child(3) {
  95.     top: 0;
  96.     left: 20px;
  97.     -webkit-transform: rotate(90deg);
  98.         -ms-transform: rotate(90deg);
  99.             transform: rotate(90deg);
  100.     -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
  101.             animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }
  102.   .line-spin-fade-loader > div:nth-child(4) {
  103.     top: -13.63636px;
  104.     left: 13.63636px;
  105.     -webkit-transform: rotate(45deg);
  106.         -ms-transform: rotate(45deg);
  107.             transform: rotate(45deg);
  108.     -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
  109.             animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }
  110.   .line-spin-fade-loader > div:nth-child(5) {
  111.     top: -20px;
  112.     left: 0;
  113.     -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
  114.             animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }
  115.   .line-spin-fade-loader > div:nth-child(6) {
  116.     top: -13.63636px;
  117.     left: -13.63636px;
  118.     -webkit-transform: rotate(-45deg);
  119.         -ms-transform: rotate(-45deg);
  120.             transform: rotate(-45deg);
  121.     -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
  122.             animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }
  123.   .line-spin-fade-loader > div:nth-child(7) {
  124.     top: 0;
  125.     left: -20px;
  126.     -webkit-transform: rotate(90deg);
  127.         -ms-transform: rotate(90deg);
  128.             transform: rotate(90deg);
  129.     -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
  130.             animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }
  131.   .line-spin-fade-loader > div:nth-child(8) {
  132.     top: 13.63636px;
  133.     left: -13.63636px;
  134.     -webkit-transform: rotate(45deg);
  135.         -ms-transform: rotate(45deg);
  136.             transform: rotate(45deg);
  137.     -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
  138.             animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }
  139.   .line-spin-fade-loader > div {
  140.     background-color: #279fcf;
  141.     width: 4px;
  142.     height: 35px;
  143.     border-radius: 2px;
  144.     margin: 2px;
  145.     -webkit-animation-fill-mode: both;
  146.             animation-fill-mode: both;
  147.     position: absolute;
  148.     width: 5px;
  149.     height: 15px; }

3、效果图

纯css3 加载loading动画特效的更多相关文章

  1. 页面预加载loading动画，再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  2. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  3. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  4. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. 页面加载loading动画

    关于页面加载的loading动画,能度娘到的大部分都是通过定时器+蒙层实现的,虽然表面上实现了动画效果,实际上动化进程和页面加载进程是没有什么关系的,只是设置几秒钟之后关闭蒙层,但假如页面须要加载的元 ...

  6. css3加载ing动画

    项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function ...

  7. CSS3扁平化Loading动画特效

    效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...

  8. 兼容ie10及以上css3加载进度动画

      html <div class="spinner">   <div class="rect1"></div>   < ...

  9. 各种加载效果，适合做加载loading动画效果 Eclipse版

    Animation.rar 链接: http://pan.baidu.com/s/1c0QkOz2 密码: kd57

随机推荐

  1. BZOJ-1087 互不侵犯King 状压DP+DFS预处理

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2337 Solved: 1366 [Submit][ ...

  2. 【poj1962】 Corporative Network

    http://poj.org/problem?id=1962 (题目链接) 时隔多年又一次写带权并查集. 题意 n个节点,若干次询问,I x y表示从x连一条边到y,权值为|x-y|%1000:E x ...

  3. TYVJ1000 A+B problem [存个高精模板]

    A+B Problem! 通过模拟我故乡非洲的计算方式,我们很快可以解决这道题. #include<iostream> #include<cstdio> #include< ...

  4. event driven的一些概念

    1. event :Something that happens during your application that requires a response. 2.event object:Th ...

  5. 透透彻彻IoC（你没有理由不懂！）

    http://www.myexception.cn/open-source/418322.html 引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明 ...

  6. 嵌入式实时操作系统μCOS原理与实践任务控制与时间的解析

    /*************************************************************************************************** ...

  7. MyEclipse使用SVN进行项目版本控制

    一.搭建SVN服务器. 例如,使用VisualSVN Server,下载后安装. (1)在Repositories(版本库)上右击,新建Repository,选择Regular FSFS reposi ...

  8. Ext.Net学习笔记24：在ASP.NET MVC中使用Ext.Net

    在前面的笔记中已经介绍了如何在ASP.NET WebForm中使用Ext.Net,由于这个系列一直在WebForm中使用,所以并没有涉及到ASP.NET MVC中的用法. 如果你要在ASP.NET M ...

  9. C++_Eigen函数库用法笔记——Block Operations

    Using block operations rvalue, i.e. it was only read from lvalues, i.e. you can assign to a block Co ...

  10. XML做下拉列表

    5-18X.php主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...