几个页面loading样式
随手练习了几个loading样式，以后看到有意思的loading样式也会补充上。样式的兼容性建议还是去w3c上看下属性的兼容性，至少我习惯这么多，当然，w3c中文网貌似很久很久没更新过了，可能更好的还是去google下。
我给出的代码一般会把浏览器前缀样式给省略，因为像动画的关键帧这样的需要前缀的属性会使贴出来的代码很长。
下面给出示意图和代码：
（1）两个小球：
<!doctype html>
<head>
<title>两个小球</title>
<style>
.loading-area {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -40px;
width: 80px;
height: 100px;
text-align: center;
border-radius: 4px;
background-color: rgba(0, 0, 0, .04);
} .icon-ball:before, .icon-ball:after {
content: '';
position: absolute;
display: inline-block;
top: 20px;
left: 50%;
margin-left: -7px;
width: 14px;
height: 14px;
border: 1px solid #999;
border-radius: 50%;
box-sizing: border-box;
background-color: #999;
/*-webkit-animation: loading 1.8s linear alternate infinite;*/
animation: loading 1.8s linear alternate infinite;
} .icon-ball:after {
top: 70px;
animation-name: another-loading;
border-color: rgba(0, 0, 0, .04);
background-color: rgba(0, 0, 0, .08);
} @keyframes loading {
0% {top: 20px;}
100% {top: 70px;}
} @keyframes another-loading {
0% {top: 70px;}
100% {top: 20px;}
}
</style>
</head>
<body>
<div class="loading-area icon-ball">
</div>
</body>
</html>
（2）时钟：
<!doctype html>
<head>
<title>时钟</title>
<style>
.loading-area {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -40px;
width: 80px;
height: 100px;
border-radius: 4px;
background-color: rgba(0, 0, 0, .04);
} .icon-timer {
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
} .icon-timer:before, .icon-timer:after {
content: '';
display: inline-block;
position: absolute;
bottom: 50%;
left: 50%;
margin-left: -1px;
width: 2px;
height: 8px;
background-color: #333;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
/*transform-origin: center bottom;*/
}
.icon-timer:before {
/*-webkit-animation: hourhand 24s linear infinite;*/
animation: hourhand 24s linear infinite;
} .icon-timer:after {
height: 12px;
/*-webkit-animation: minutehand 2s linear infinite;*/
animation: minutehand 2s linear infinite;
} @keyframes hourhand {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg);}
} @keyframes minutehand {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="loading-area">
<i class="icon-timer"></i>
</div>
</body>
</html>
（3）、充电
<!doctype html>
<head>
<title>充电</title>
<style>
.loading-area {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -40px;
width: 80px;
height: 100px;
border-radius: 4px;
background-color: rgba(0, 0, 0, .04);
} .icon-charge {
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -20px;
width: 40px;
height: 20px;
/*border: 1px solid #333;*/
border-radius: 4px;
background-color: #fff;
} .icon-charge:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 20px;
border-radius: 4px;
background-color: #ddd;
/*-webkit-animation: charge 2s linear alternate infinite;*/
animation: charge 2s linear alternate infinite;
} @keyframes charge {
0% {width: 0;}
100% {width: 40px; background-color: #3dec3a;}
} .icon-charge:before {
content: '';
position: absolute;
top: -12px;
left: -12px;
width: 8px;
height: 8px;
background-color: #000;
animation: move 8s ease infinite;
} @keyframes move {
0% {top: -12px; left: -12px; transform: rotate(0deg); border-radius: 0;}
25% {top: -12px; left: 52px; transform: rotate(360deg); border-radius: 50%;}
50% {top: 32px; left: 52px; transform: rotate(0deg); border-radius: 0;}
75% {top: 32px; left: -12px; transform: rotate(360deg); border-radius: 50%;}
100% {top: -12px; left: -12px; transform: rotate(0deg); border-radius: 0;}
}
</style>
</head>
<body>
<div class="loading-area">
<i class="icon-charge"></i>
</div>
</body>
</html>
几个页面loading样式的更多相关文章
- A标签/按钮防止重复提交&页面Loading制作
[实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...
- 利用@keyframe及animation做一个页面Loading时的小动画
前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1 @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- Form认证导致登陆页面的样式无效和图片不能显示的原因
最近在做企业内门户网站,一切进展还算顺利,部署到生产环境的时候也能没有什么大问题,只是登录页面的样式不起作用,不知为何,因为是使用了login控件,最初以为是此控件有内置默认样式或者什么原因,于是就不 ...
- 页面loading提示效果
前言: 现在做页面一般为了提示友好点,一般会做个页面正在加载的loading提示效果,当页面加载完毕后再显示内容!这个时候就需要监控页面的资源加载的情况,有时候这并不好做,因为页面涉及图片,视频,已经 ...
- 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- 页面css样式找不到问题
出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...
- 页面重置样式reset.css
我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...
- 页面loading效果
当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...
随机推荐
- NOIP2009T3最优贸易
洛谷传送门 看到这个题,原本想先从后往前dfs,求出能到终点的点,再在这些点里从前往后spfa,用一条边上的两个城市的商品价格的差来作边权,实施过后,发现图中既有负边权,又有回路,以及各种奇奇怪怪的东 ...
- Elasticsearch实现类似 like '?%' 搜索
在做搜索的时候,下拉联想词的搜索肯定是最常见的一个场景,用户在输入的时候,要自动补全词干,说得简单点,就是以...开头搜索,如果是数据库,一句SQL就很容易实现,但在elasticsearch如何实现 ...
- php 启动过程 - sapi MSHUTDOWN 过程
php 启动过程 - sapi MSHUTDOWN 过程 概述 当服务器关闭时, 会走到 sapi MSHUTDOWN 过程 注册过程 本次内容是在 php 启动过程 - sapi MINIT 过程 ...
- ZJOI2008树的统计Count
知识点-树链剖分 "在一棵树上进行路径的修改.求极值.求和":乍一看只要线段树就能轻松解决,实际上,仅凭线段树是不能搞定它的.我们需要用到一种貌似高级的复杂算法--树链剖分. ...
- Unity调用Android的两个方式：其一、调用jar包
unity在Android端开发的时候,免不了要调用Java:Unity可以通过两种方式来调用Android:一是调用jar.二是调用aar. 这篇文章主要讲解怎么从无到有的生成一个jar包,然后un ...
- SELECT中的多表连接
MySQL多表连接查询 连接(join):将一张表中的行按照某个条件(连接条件)和另一张表中的行连接起来形成一个新行的过程. 根据连接查询返回的结果,分3类: 内连接(inner join) 外连接( ...
- NodeJS 事件循环
Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.j ...
- Java中的WebService服务
一.在本地发布一个webservice服务 1.使用jdk中的 javax.xml.ws.Endpoint 类的 static Endpointpublish(Stringaddress,Object ...
- js中面向对象编程
一.理解对象: 第一种:基于Object对象 var person = new Object(); person.name = 'My Name'; person.age = 18; person.g ...
- 为什么要用Handler ？
我的理解,Handler的好处之一就是配合子线程处理数据之后控制UI的显示. 如下是http://www.cnblogs.com/sydeveloper/p/3312865.html的完美解释: 当应 ...