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

1、demo.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="./loaders.css">

<title>纯css3 加载loading动画特效</title>

</head>

<body>

<style>

body{width:100%;height:100%;margin:0;}

.fuceng{position:absolute;width:100%;height:100%;margin:0;}

.loading{margin-left: 50%; margin-top:20%;}

</style>

 <div>

	<div class="fuceng">

      <div class="loading">

        <div class="loader-inner line-spin-fade-loader">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

 	</div>

</body>

</html>

2、loaders.css

/**

 *

 * All animations must live in their own file

 * in the animations directory and be included

 * here.

 *

 */

/**

 * Styles shared by multiple animations

 */

/**

 */

.ball-spin-fade-loader {

  position: relative; }

  .ball-spin-fade-loader > div:nth-child(1) {

    top: 25px;

    left: 0;

    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;

            animation: ball-spin-fade-loader 1s 0s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(2) {

    top: 17.04545px;

    left: 17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;

            animation: ball-spin-fade-loader 1s 0.12s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(3) {

    top: 0;

    left: 25px;

    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;

            animation: ball-spin-fade-loader 1s 0.24s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(4) {

    top: -17.04545px;

    left: 17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;

            animation: ball-spin-fade-loader 1s 0.36s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(5) {

    top: -25px;

    left: 0;

    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;

            animation: ball-spin-fade-loader 1s 0.48s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(6) {

    top: -17.04545px;

    left: -17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;

            animation: ball-spin-fade-loader 1s 0.6s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(7) {

    top: 0;

    left: -25px;

    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;

            animation: ball-spin-fade-loader 1s 0.72s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(8) {

    top: 17.04545px;

    left: -17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;

            animation: ball-spin-fade-loader 1s 0.84s infinite linear; }

  .ball-spin-fade-loader > div {

    background-color: #279fcf;

    width: 15px;

    height: 15px;

    border-radius: 100%;

    margin: 2px;

    -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

    position: absolute; }

@-webkit-keyframes line-spin-fade-loader {

  50% {

    opacity: 0.3; }

  100% {

    opacity: 1; } }

@keyframes line-spin-fade-loader {

  50% {

    opacity: 0.3; }

  100% {

    opacity: 1; } }

.line-spin-fade-loader {

  position: relative; }

  .line-spin-fade-loader > div:nth-child(1) {

    top: 20px;

    left: 0;

    -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(2) {

    top: 13.63636px;

    left: 13.63636px;

    -webkit-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(3) {

    top: 0;

    left: 20px;

    -webkit-transform: rotate(90deg);

        -ms-transform: rotate(90deg);

            transform: rotate(90deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(4) {

    top: -13.63636px;

    left: 13.63636px;

    -webkit-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(5) {

    top: -20px;

    left: 0;

    -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(6) {

    top: -13.63636px;

    left: -13.63636px;

    -webkit-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(7) {

    top: 0;

    left: -20px;

    -webkit-transform: rotate(90deg);

        -ms-transform: rotate(90deg);

            transform: rotate(90deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(8) {

    top: 13.63636px;

    left: -13.63636px;

    -webkit-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }

  .line-spin-fade-loader > div {

    background-color: #279fcf;

    width: 4px;

    height: 35px;

    border-radius: 2px;

    margin: 2px;

    -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

    position: absolute;

    width: 5px;

    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. 友盟iOS推送配置（从真机调试到推送）

    下面我来讲解一下友盟iOS的推送配置,其实友盟只是一个示例,换做其余的第三方推送服务也会适用,只是第三方的后面服务变了而已. iOS推送(包括真机调试)所需要的步骤和文件如下: 备注:这里我将省略掉一 ...

  2. Notions of Flow Networks and Flows

    这篇随笔是对算法导论(Introduction to Algorithms, 3rd. Ed.)第26章 Maximum Flow的摘录. ------------------------------ ...

  3. 通过HTTP协议实现多线程下载

    1. 基本原理,每条线程从文件不同的位置开始下载,最后合并出完整的数据. 2. 使用多线程下载的好处     下载速度快.为什么呢?很好理解,以往我是一条线程在服务器上下载.也就是说,对应在服务器上, ...

  4. java变量作用域

      1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可 ...

  5. PHP实现发红包程序（helloweba网站经典小案例）

    我们先来分析下规律. 设定总金额为10元,有N个人随机领取: N=1 第一个 则红包金额=X元: N=2 第二个 为保证第二个红包可以正常发出,第一个红包金额=0.01至9.99之间的某个随机数. 第 ...

  6. ci控制器写规范

    不需要后缀名 文件名全部小写 所有控制器需要直接或者间接继承CI_Controller 以下划线开头的方法为私有方法,不能被请求 protected private的方法不能被浏览器请求 ci方法名不 ...

  7. POI读写Excel简述之读取

    一.POI读取Excel文件(以Excel2003版为例,2007版就是根据文件扩展名xlsx将HSSFWorkbook换为XSSFWorkbook,及其Sheet.Row.Cell也相应替换) // ...

  8. php中文字符串翻转

    转自:http://www.oschina.net/code/snippet_613962_17070 <?php header("content-type:text/html;cha ...

  9. object-c 的ARC 问答/介绍

    原文:http://blog.csdn.net/kmyhy/article/details/8895606 概念" Clangstatic analyzer "是一个非常有用的查找 ...

  10. sql server case when 判断为空

    代码如下 select distinct G.* ,(select BUSINESS_NAME from BusinessInfo where BusinessInfo.BUSINESS_BID=G. ...