<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Loading小动画</title>

 <meta name="author" content="http://www.cnblogs.com/leafsummer?qq=11580563">

 <style>

 .wx_loading_icon{

     position: absolute;

     width: 24px;

     height: 24px;

     border: 2px solid #237FE5;

     border-radius: 24px;

     -webkit-animation:gif 1s linear infinite;

     animation: gif 1s linear infinite;

     clip: rect(0 0 12px 0);

 }

 /*Chorme,Safari必须加上*/

 @-webkit-keyframes gif{

     to{-webkit-transform: rotate(0deg);}

     from{-webkit-transform: rotate(360deg);}

 }

 @keyframes gif{

     0%{transform: rotate(0deg);}

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

 }

 </style>

 </head>

 <body>

     <div class="wx_loading_icon"></div>

 <script>

 </script>

 </body>

 </html>

DEMO代码

很常见的一直旋转的loading效果的更多相关文章

  1. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  2. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  3. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

  4. CSS3实现10种Loading效果（转）

    CSS3实现10种Loading效果  原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...

  5. CSS3实现的几个小loading效果

    昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家 1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading 这 ...

  6. CSS3饼状loading效果

    概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...

  7. js实现所有异步请求全部加载完毕后，loading效果消失

    在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...

  8. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  9. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

随机推荐

  1. windows串口通信的一个活动图

    1,打开串口的活动图: 2,关闭串口的活动图:

  2. TreeView节点

    TreeView由节点构成,建树通过对TreeView.items属性进行操作.Items是一个TTreeNodes对象,这是一个TTreeNode集. 一.针对TTreeNodes,也就是 Tree ...

  3. 高性能mysql主主架构

    A.环境描述 服务器A(主) 192.168.0.105 服务器B(主) 192.168.0.108 Mysql版本: 5.6.21 System OS:CentOS release 6.5 主从需同 ...

  4. hdu 5505 GT and numbers

    GT and numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  5. hdu 1034 Candy Sharing Game

    Candy Sharing Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. 设计模式23---设计模式之装饰模式（Decorator）（结构型）

    1.装饰模式讲解 1.1定义 动态的给一个对象添加一些额外的职责.就增加功能来说,装饰模式比生成子类更加灵活. 1.2装饰模式要点 透明的给一个对象增加功能,换句话说就是要给一个对象增加功能,但是不能 ...

  7. IOS开发--C语言入门--如何结合Terminal和Vim开发C语言程序

    一直以来都想着挤出时间,记录开发之路的点点滴滴(现在记录已成回忆),和大家一起分享,开发人员总是在沟通和相互学习中提高自身的能力.路过的大神也好初学者也罢,若发现文章中又观点不对的,还望大家指出. 现 ...

  8. wavecom短信猫常用AT命令

    wavecom短信猫常用AT命令 一.一般命令 1. AT+CGMI 给出模块厂商的标识. 2. AT+CGMM 获得模块标识.这个命令用来得到支持的频带 (GSM 900,DCS 1800 或PCS ...

  9. sql2008_x64 读取excel

    sql2008_x64 读取excel 下载64bit 版的AccessDatabaseEngine_x64:http://www.microsoft.com/en-us/download/detai ...

  10. 对PostgreSQL cmin和cmax的理解

    看例子: 开两个终端来对比: 在终端A: [pgsql@localhost bin]$ ./psql psql () Type "help" for help. pgsql=# b ...