<!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. use tomcat to access the file cross the environment

    background: 项目中的一个小工具,是一个Cron Job ,每天去搜集下服务器Hadoop Job的运行状态,并生成一份报告发送给整个Team,生产报告的同时把相关的日志文件保存到固定的一台 ...

  2. 万台规模下的SDN控制器集群部署实践

    目前在网络世界里,云计算.虚拟化.SDN.NFV这些话题都非常热.今天借这个机会我跟大家一起来一场SDN的深度之旅,从概念一直到实践一直到一些具体的技术. 本次分享分为三个主要部分: SDN & ...

  3. Java 多线程同步的五种方法

    一.引言 闲话不多说,进入正题. 二.为什么要线程同步 因为当我们有多个线程要同时访问一个变量或对象时,如果这些线程中既有读又有写操作时,就会导致变量值或对象的状态出现混乱,从而导致程序异常.举个例子 ...

  4. 很好用的mybatis分页解决方案

    分页如果写在SQL脚本中,将会大大影响我们后续数据库的迁移难度.mybatis的分页一般是自己实现一个mybatis的拦截器,然后根据某些特定的条件开启分页,对原有SQL进行改造. 正在我对mybat ...

  5. 谷歌官方刷新组件SwipeRefreshLayout

    今天开始使用谷歌的SwipeRefreshLayout,会记下一些坑 1.手动调用setRefreshing(true)不会出现刷新动画 原因是:SwipeRefreshLayout indicato ...

  6. Eclipse的DDMS File Explorer无法进入data目录解决方案

    进入data目录需要root权限.所以,你的手机要有root才可以.然后做以下步骤就可以了 1.cmd进入platform-tools目录 2.adb shell 3.su(这里要看手机有没有请求ro ...

  7. UIViewController生命周期测试

    push进入  -[NaviRootVC viewWillDisappear:]  -[NextVC viewWillAppear:]  -[NextVC viewWillLayoutSubviews ...

  8. PING命令入门详解（转载）

    本文转自http://www.linkwan.com/gb/tech/htm/928.htm 1.Ping的基础知识 ping命令相信大家已经再熟悉不过了,但是能把ping的功能发挥到最大的人却并不是 ...

  9. CentOS6.5安装MySQL及完全卸载

    原文地址:http://www.cnblogs.com/zhongshengzhen/ 第1步.yum安装mysql [root@localhost ~]# yum -y install mysql- ...

  10. C#开源资源大汇总

    C#开源资源大汇总     C#开源资源大汇总 一.AOP框架        Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行 ...