最近项目中要实现当页面还没有加载完给用户提示正在加载的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. Bzoj1150 数据备份Backup

    Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味 的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家 ...

  2. COGS8 备用交换机

    备用交换机 ★★   输入文件:gd.in   输出文件:gd.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] n个城市之间有通讯网络,每个城市都有通讯交换机,直接或间 ...

  3. PL/0编译器(java version)–Pcode.java

    1: package compiler; 2:   3: /** 4: * //虚拟机指令 5: * 6: * @author jiangnan 7: * 8: */ 9: public class ...

  4. view视图文件中的input等输入框必须含有name属性，不然控制器里的动作formCollection是没有值的

    view视图文件中的input等输入框必须含有name属性,不然控制器里的动作formCollection是没有值的,就是没有name属性,后台获取不到值

  5. 修改MYSQL 表中的字段属性

    1.登录数据库 >mysql -u root -p 数据库名称 2.查询所有数据表 >show tables; 3.查询表的字段信息 >desc 表名称; 4.1.修改某个表的字段类 ...

  6. jquery------导入jquery.2.2.3.min.js

    问题: 导入jquery.2.2.3.min.js后MyEclipse会提示代码有错误 方法: 选中jquery.2.2.3.min.js->右键->选择“MyEclipse”中的“Exc ...

  7. iOS-(kCFStreamErrorDomainSSL, -9802)

    kCFStreamErrorDomainSSL, -9802 我是微博授权时get页面时候碰到的 其实就是http安全问题 在info.plist里添加并设置Allow Arbitrary Loads ...

  8. PQ格式化虚拟机硬盘如何生效

    用pq格式化虚拟机硬盘后,安装时,总是从dhcp的网卡启动,没有从硬盘启动 但是用ghost是可以拷贝镜像文件的 这就是说,硬盘有了,但是没有将硬盘"激活",没有将硬盘设为acti ...

  9. 超常用的PHP正则表达式收集整理

    以下就是对超常用的PHP正则表达式进行的收集整理,为了方便大家更快更好的掌握php正则表达式. 一.表单验证匹配验证账号,字母开头,允许 5-16 字节,允许字母数字下划线:^[a-zA-Z][a-z ...

  10. zoj.3865.Superbot(bfs + 多维dp)

    Superbot Time Limit: 2 Seconds      Memory Limit: 65536 KB Superbot is an interesting game which you ...