<!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. HDU 3289 Cat VS Dog （二分匹配 求 最大独立集）

    题意:每个人有喜欢的猫和不喜欢的狗.留下他喜欢的猫他就高心,否则不高心.问最后最多有几个人高心. 思路:二分图求最大匹配 #include<cstdio> #include<cstr ...

  2. 洛谷 P1273 有线电视网

    2016-05-31 13:25:45 题目链接: 洛谷 P1273 有线电视网 题目大意: 在一棵给定的带权树上取尽量多的叶子节点,使得sigma(val[选择的叶子节点])-sigma(cost[ ...

  3. Android开发错误信息收集

    android sdk 无法更新或更新太慢 备注信息:sdk manager中加入mirrors.opencas.org,强迫http方式 ADT下载地址:http://dl.google.com/a ...

  4. ubuntu下PHP支持cURL

    公司项目需要,注册需要验证手机号码,其中需要LAMP支持cURL.由于事先安装平台的时候,并没有注意到这一点,所以编译PHP5的时候,并没有使用参数--with-curl.后来需要的时候,查一些参考方 ...

  5. 1N系列稳压二极管参数

    1N系列稳压二极管参数 型号 稳定电压 型号 稳定电压 型号 稳定电压 1N5236 7.5 1N5738 12 1N6002 12 1N5237 8.2 1N5739 13 1N6003 13 1N ...

  6. RC522天线匹配参数【worldsing笔记】

    图为Device读卡器的参数值 EMC电路对读写距离影响不大:                   L3 和L4 固定为2.2uH:                  C11和C12也是固定值,如果P ...

  7. ST-Link STVP Cannot communicate with the device!

    用STLink在ST Visual Programmer中对STM8下载二进制文件有时会出现: 原因:多半是STM8目标板没有电源有问题,或是电源引脚虚焊:

  8. Arrays.asList的源码分析

    以前一直很奇怪为什么Arrays.asList的数组不能插入新的数据,后来看了源码发现是因为内部是一个final的数组支持起来的Arraylist,下面贴入源码与分析. 1.先看Arrays的方法 我 ...

  9. 325. Maximum Size Subarray Sum Equals k

    最后更新 二刷 木有头绪啊.. 看答案明白了. 用的是two sum的思路. 比如最终找到一个区间,[i,j]满足sum = k,这个去见可以看做是 [0,j]的sum 减去 [0,i]的Sum. 维 ...

  10. JS 添加千分位，测试可以使用

    JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript">funct ...