很常见的一直旋转的loading效果
<!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效果的更多相关文章
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
- CSS3实现10种Loading效果(转)
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- CSS3实现的几个小loading效果
昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家 1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading 这 ...
- CSS3饼状loading效果
概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...
- js实现所有异步请求全部加载完毕后,loading效果消失
在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...
- 【常见】CSS3进度条Loading动画
现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...
- HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
随机推荐
- 如何理解Stay hungry,stay foolish?
People know about this words because of Steve Jobs.Me too. Hungry,对知识我们一般不会用hungry,我们会用curious,什么时候我 ...
- leetcode@ [274/275] H-Index & H-Index II (Binary Search & Array)
https://leetcode.com/problems/h-index/ Given an array of citations (each citation is a non-negative ...
- leetcode@ [174] Dungeon Game (Dynamic Programming)
https://leetcode.com/problems/dungeon-game/ The demons had captured the princess (P) and imprisoned ...
- BNUOJ-29365 Join in tasks 简单数学
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29365 首先排序,然后维护一个后缀,等差求下和就可以了.. //STATUS:C++_AC ...
- CM 部署bigdata测试环境群集机器报错
CM repo库info;
- 锋利的jquery第二版学习笔记
jquery系统学习笔记 一.初识:jquery的优势:1.轻量级(压缩后不到30KB)2.强大的选择器(支持css1.css2选择器的全部 css3的大部分 以及一些独创的 加入插件的话还可支持XP ...
- 爬取知乎百万信息之UrlTask
这个模块的作用是从nexturl队列获取用户的关注列表的url,获取关注列表.服务器返回的Json的数据 封装一个对象的序列化和反序列化的类 public class SerializeHelper ...
- zabbix邮件报警脚本(Python)
#!/usr/bin/python #coding:utf-8 import smtplib from email.mime.text import MIMEText import sys mail_ ...
- eclipse创建maven模块工程
创建maven模块项目,可以使用eclipse工具来完成. 1.创建父工程,注意,要选择maven-archetype-site-simple new --> maven project 填写项 ...
- cocos2d-x中本地推送消息
作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4038277.html IOS下很简单: 添加一条推送 void PushNotific ...