随手练习了几个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. 关于binary log一点总结[转]

    阅读目录(Content) 1 what's binary log 2 Binary Logging Options and Variables 2.1 基础参数 3 Binary Logging F ...

  2. C# treeview 使用笔记

    treeView默认 展开 treeView1.ExpandAll(); treeview判断点击节点: private void treeView1_AfterSelect(object sende ...

  3. Cocos2d-x性能分析-Android版本之Gprof

    在 iOS 平台下我们可以用 Xcode 自带的 Profile 工具来测试我们程序的性能,Android 平台使用的 gprof 这里整理了一下具体的cocos2dx 使用gprof进行性能分析的具 ...

  4. 我使用的Chrome插件列表

    AdBlock 用来屏蔽广告的,有一些网站会探测出你在使用AdBlock.如果一定要继续浏览的话,你可能需要暂停一下AdBlock Vimium 非常推荐喜欢vim的用户试试看这款插件,它的主要特色是 ...

  5. ArrayList 冷门方法

    以下代码片都是 jdk1.8 ArrayList中的官方代码 /** * Constructs a list containing the elements of the specified * co ...

  6. html渲染过程

    用户输入url地址,浏览器依据域名寻觅IP地址浏览器向服务器发送http恳求,假如服务器段回来以301之类的重定向,浏览器依据相应头中的location再次发送恳求服务器端承受恳求,处理恳求生成htm ...

  7. CentOS下安装JDK的三种方法

    方法一:手动解压JDK的压缩包,然后设置环境变量 1.在/usr/目录下创建java目录 [root@localhost ~]# mkdir/usr/java[root@localhost ~]# c ...

  8. 三、Dotnet Core Code First 创建数据库

    1.在项目中创建Models文件夹2.在Models文件夹中建立 表的属性类:如 User类.3.在Models文件夹创建DataContext 继承DbContext类(可以选择重写OnModelC ...

  9. 工具类总结---（六）---之http及https请求

    下面使用的是HttpURLConnection进行的网络链接,并对https进行了忽略证书. 在这个utils里面,也使用到前面几个utils,比如下载文件的方法,就使用到了Fileutils pac ...

  10. 智能指针剖析（下）boost::shared_ptr&其他

    1. boost::shared_ptr 前面我已经讲解了两个比较简单的智能指针,它们都有各自的优缺点.由于 boost::scoped_ptr 独享所有权,当我们真真需要复制智能指针时,需求便满足不 ...