<!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. codeforces 617B Chocolate

    题意: 在给定01串中,问能分割成多少个子串?每个子串只有一个1. dp #include<iostream> #include<string> #include<alg ...

  2. 【openstack报错】【metadata问题】‘http://169.254.169.254/2009-04-04/meta-data/instance-id’ failed : url error [[Errno 111] Connection refused]

    [时间]2014年2月25日 [平台]ubuntu 12.04.3 openstack havana  with nova-network in multi-host [日志]实例启动时输出的日志内容 ...

  3. Spring基础知识汇总 Java开发必看

    Spring简介 Spring框架由Rod Johnson开发,2004年发布了Spring框架的第一版.Spring是一个从实际开发中抽取出来的框架,因此它完成了大量开发中的通用步骤,留给开发者的仅 ...

  4. 转载 ASP.NET MVC中使用ASP.NET Identity

    转载原地址: http://blog.jobbole.com/90695/ 在之前的文章中,我为大家介绍了OWIN和Katana,有了对它们的基本了解后,才能更好的去学习ASP.NET Identit ...

  5. 转载最佳JQuery学习网站

    转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript    ...

  6. uCos 之 TaskIdle() 注意事项【worldsing笔记】

    在大多OS里都存在Idle线程或任务,同样uCos也不例外,为什么估计很少有人细研究.为什么设立Idle? 能不能去了? 首先看看uCos中关于Idle的代码做个介绍: config.h里对Idle的 ...

  7. URAL 1019 - Line Painting

    跟前面某个题一样,都是区间染色问题,还是用我的老方法,区间离散化+二分区间端点+区间处理做的,时间跑的还挺短 坑爹的情况就是最左端是0,最右端是1e9,区间求的是开区间 #include <st ...

  8. plsql developer的一些使用

    .PL/SQL Developer记住登陆密码 在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法:PL -> ...

  9. Android Studio Error2

    ECLIPSE ANDROID PROJECT IMPORT SUMMARY ====================================== Ignored Files: ------- ...

  10. Java连接MYSQL【转载】

    这篇文章主要以MySQL为例讲下Java如何连接到数据库的. 当然,首先要安装有JDK(一般是JDK1.5.X).然后安装MySQL,这些都比较简单,具体过程就不说了.配置好这两个环境后,下载JDBC ...