随手练习了几个loading样式，以后看到有意思的loading样式也会补充上。样式的兼容性建议还是去w3c上看下属性的兼容性，至少我习惯这么多，当然，w3c中文网貌似很久很久没更新过了，可能更好的还是去google下。

　　我给出的代码一般会把浏览器前缀样式给省略，因为像动画的关键帧这样的需要前缀的属性会使贴出来的代码很长。

　　下面给出示意图和代码：

　　（1）两个小球：

　　

　　

 <!doctype html>

 <head>

 <title>两个小球</title>

 <style>

     .loading-area {

         position: fixed;

         top: 50%;

         left: 50%;

         margin: -50px 0 0 -40px;

         width: 80px;

         height: 100px;

         text-align: center;

         border-radius: 4px;

         background-color: rgba(0, 0, 0, .04);

     }

     .icon-ball:before, .icon-ball:after {

         content: '';

         position: absolute;

         display: inline-block;

         top: 20px;

         left: 50%;

         margin-left: -7px;

         width: 14px;

         height: 14px;

         border: 1px solid #999;

         border-radius: 50%;

         box-sizing: border-box;

         background-color: #999;

         /*-webkit-animation: loading 1.8s linear alternate infinite;*/

         animation: loading 1.8s linear alternate infinite;

     }

     .icon-ball:after {

         top: 70px;

         animation-name: another-loading;

         border-color: rgba(0, 0, 0, .04);

         background-color: rgba(0, 0, 0, .08);

     }

     @keyframes loading {

         0% {top: 20px;}

         100% {top: 70px;}

     }

     @keyframes another-loading {

         0% {top: 70px;}

         100% {top: 20px;}

     }

 </style>

 </head>

 <body>

 <div class="loading-area icon-ball">

 </div>

 </body>

 </html>

　　

　　（2）时钟：

　　
　　

<!doctype html>

<head>

<title>时钟</title>

<style>

    .loading-area {

        position: fixed;

        top: 50%;

        left: 50%;

        margin: -50px 0 0 -40px;

        width: 80px;

        height: 100px;

        border-radius: 4px;

        background-color: rgba(0, 0, 0, .04);

    }

    .icon-timer {

        position: absolute;

        top: 50%;

        left: 50%;

        margin: -15px 0 0 -15px;

        width: 30px;

        height: 30px;

        border-radius: 50%;

        background-color: #fff;

    }

    .icon-timer:before, .icon-timer:after {

        content: '';

        display: inline-block;

        position: absolute;

        bottom: 50%;

        left: 50%;

        margin-left: -1px;

        width: 2px;

        height: 8px;

        background-color: #333;

        -webkit-transform-origin: 50% 100%;

        -ms-transform-origin: 50% 100%;

        transform-origin: 50% 100%;

        /*transform-origin: center bottom;*/

    }

    .icon-timer:before {

        /*-webkit-animation: hourhand 24s linear infinite;*/

        animation: hourhand 24s linear infinite;

    }

    .icon-timer:after {

        height: 12px;

        /*-webkit-animation: minutehand 2s linear infinite;*/

        animation: minutehand 2s linear infinite;

    }

    @keyframes hourhand {

        0% {transform: rotate(0deg)}

        100% {transform: rotate(360deg);}

    }

    @keyframes minutehand {

        0% {transform: rotate(0deg)}

        100% {transform: rotate(360deg);}

    }

</style>

</head>

<body>

<div class="loading-area">

    <i class="icon-timer"></i>

</div>

</body>

</html>

　　（3）、充电

　　

　　

<!doctype html>

<head>

<title>充电</title>

<style>

    .loading-area {

        position: fixed;

        top: 50%;

        left: 50%;

        margin: -50px 0 0 -40px;

        width: 80px;

        height: 100px;

        border-radius: 4px;

        background-color: rgba(0, 0, 0, .04);

    }

    .icon-charge {

        position: absolute;

        top: 50%;

        left: 50%;

        margin: -10px 0 0 -20px;

        width: 40px;

        height: 20px;

        /*border: 1px solid #333;*/

        border-radius: 4px;

        background-color: #fff;

    }

    .icon-charge:after {

        content: '';

        display: inline-block;

        position: absolute;

        top: 0;

        left: 0;

        width: 0;

        height: 20px;

        border-radius: 4px;

        background-color: #ddd;

        /*-webkit-animation: charge 2s linear alternate infinite;*/

        animation: charge 2s linear alternate infinite;

    }

    @keyframes charge {

        0% {width: 0;}

        100% {width: 40px; background-color: #3dec3a;}

    }

    .icon-charge:before {

        content: '';

        position: absolute;

        top: -12px;

        left: -12px;

        width: 8px;

        height: 8px;

        background-color: #000;

        animation: move 8s ease infinite;

    }

    @keyframes move {

        0% {top: -12px; left: -12px; transform: rotate(0deg); border-radius: 0;}

        25% {top: -12px; left: 52px; transform: rotate(360deg); border-radius: 50%;}

        50% {top: 32px; left: 52px; transform: rotate(0deg); border-radius: 0;}

        75% {top: 32px; left: -12px; transform: rotate(360deg); border-radius: 50%;}

        100% {top: -12px; left: -12px; transform: rotate(0deg); border-radius: 0;}

    }

</style>

</head>

<body>

<div class="loading-area">

    <i class="icon-charge"></i>

</div>

</body>

</html>

几个页面loading样式的更多相关文章

  1. A标签/按钮防止重复提交&页面Loading制作

    [实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...

  2. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  3. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  4. Form认证导致登陆页面的样式无效和图片不能显示的原因

    最近在做企业内门户网站,一切进展还算顺利,部署到生产环境的时候也能没有什么大问题,只是登录页面的样式不起作用,不知为何,因为是使用了login控件,最初以为是此控件有内置默认样式或者什么原因,于是就不 ...

  5. 页面loading提示效果

    前言: 现在做页面一般为了提示友好点,一般会做个页面正在加载的loading提示效果,当页面加载完毕后再显示内容!这个时候就需要监控页面的资源加载的情况,有时候这并不好做,因为页面涉及图片,视频,已经 ...

  6. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  7. 页面css样式找不到问题

    出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...

  8. 页面重置样式reset.css

    我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...

  9. 页面loading效果

    当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...

随机推荐

  1. [原]使用MessageAnalyzer实时查看远端日志

    1. 下载安装Message Analyzer 从Message Analyzer下载链接下载,安装过程从略. 说明:关于Message Analyzer的视频教程,可以在打开后的主界面上看到. 2. ...

  2. Cf #353 D. Tree Construction

    题目链接:http://codeforces.com/problemset/problem/675/D 题目大意是将一个没有相同数字的数列中的数字依次插入到二叉搜索树中,问除了第一个数字以外,其他数字 ...

  3. sqoop关系型数据迁移原理以及map端内存为何不会爆掉窥探

    序:map客户端使用jdbc向数据库发送查询语句,将会拿到所有数据到map的客户端,安装jdbc的原理,数据全部缓存在内存中,但是内存没有出现爆掉情况,这是因为1.3以后,对jdbc进行了优化,改进j ...

  4. linux下安编译安装redis

    1.先进入要安装到的目录,比如我要把redis安装到/usr/local/redis下,那就先进入/usr/local cd /usr/local 2.然后下载安装包,并解压 wget http:// ...

  5. Linux系统操作指令汇总

    1.系统配置 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIO ...

  6. 天方夜谈·数据结构·Queue

    "我在想Y的时候不能想X....." 什么叫做Queue(队列)?"队列是项的集合,对于每一项x和y,如果x在y之前离开对头,那么x一定在y之前进入队列--Sesh·Ve ...

  7. [Git]07 如何在提交过程中忽略某些文件

     一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表.通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等.我们可以创建一个名为 .gitignor ...

  8. wcf发布的服务在前端调用时，遇到跨域问题的解决方案

    我是使用IIS作为服务的宿主,因此需要在web.config中增加如下配置节: <bindings> <webHttpBinding> <binding name=&qu ...

  9. window系统下sbt的安装

    最近进了一个新公司,用playframework,不用maven,用sbt,然后就来写一下自己的心酸sbt安装进程吧. 第一步: 安装java8,配置好环境变量,这些不用多说吧,之所以是要8版本,是因 ...

  10. 搭建本地git仓库

    使用工具:git|码云 步骤: 注册码云账号,创建项目名称等. 本地git配置 本地文件目录:git init(初始化创建分支master) 基础配置:git config --global user ...