css3实现不同的loading
样式1：
<html>
<head>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -30px;
} .loading i {
display: inline-block;
float: left;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #999;
margin: 0 4px;
opacity: .1;
-webkit-animation: flashPop .6s linear alternate infinite both;
animation: flashPop .6s linear alternate infinite both;
} .loading i:nth-of-type(2) {
-webkit-animation-delay: .2s;
animation-delay: .2s
} .loading i:last-child {
-webkit-animation-delay: .4s;
animation-delay: .4s
} @-webkit-keyframes flashPop {
0% {
opacity: 1
} 33% {
opacity: .5
} 66% {
opacity: .1
}
} @keyframes flashPop {
0% {
opacity: 1
} 33% {
opacity: .5
} 66% {
opacity: .1
}
}
</style>
</head> <body>
<div class="loading">
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
样式2：
<html> <head>
<style type="text/css">
.loading {
position: fixed;
top: %;
left: %;
margin-top: -6px;
margin-left: -30px;
} .loading>i {
float: left;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #;
display: inline-block;
-webkit-animation: bouncedelay .4s infinite ease-in-out;
animation: bouncedelay .4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin: 4px;
} .loading .bounce1 {
-webkit-animation-delay: -.32s;
animation-delay: -.32s;
} .loading .bounce2 {
-webkit-animation-delay: -.16s;
animation-delay: -.16s;
} @-webkit-keyframes bouncedelay {
%,
%,
% {
-webkit-transform: scale(0.0);
} % {
-webkit-transform: scale(1.0);
}
} @keyframes bouncedelay {
%,
%,
% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} % {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
</head> <body>
<div class="loading">
<i class="bounce1"></i>
<i class="bounce2"></i>
<i class="bounce3"></i>
</div>
</body> </html>
样式3：
<html> <head>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -30px;
} .circle {
-webkit-animation: cui-loading 1.58s linear infinite;
animation: cui-loading 1.58s linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
width: 19px;
height: 19px;
border-left: #c5c5c5 1px solid;
display: block;
border-bottom: #c5c5c5 1px solid;
border-radius: 50%;
} @-webkit-keyframes cui-loading {
0% {
opacity: 1;
-webkit-transform: rotate(0deg)
} 100% {
opacity: 1;
-webkit-transform: rotate(360deg)
}
} @-moz-keyframes cui-loading {
0% {
opacity: 1;
-moz-transform: rotate(0deg)
} 100% {
opacity: 1;
-moz-transform: rotate(360deg)
}
} @-ms-keyframes cui-loading {
0% {
opacity: 1;
-ms-transform: rotate(0deg)
} 100% {
opacity: 1;
-ms-transform: rotate(360deg)
}
} @keyframes cui-loading {
0% {
opacity: 1;
transform: rotate(0deg)
} 100% {
opacity: 1;
transform: rotate(360deg)
}
}
</style>
</head> <body>
<div class="loading">
<span class="circle"></span>
</div>
</body> </html>
样式4：
<html> <head>
<style type="text/css">
.loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -6px;
margin-left: -30px;
width: 2em;
height: 2em;
color: inherit;
vertical-align: middle;
border: .3em solid #ffffff;
border-top-color: #9C27B0;
border-radius: 50%;
-webkit-animation: 1s flashPop linear infinite;
animation: 1s flashPop linear infinite;
} .loading:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -.3em;
left: -.3em;
border: .3em solid #9C27B0;
border-radius: 50%;
opacity: .5;
} @-webkit-keyframes flashPop {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} @keyframes flashPop {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head> <body>
<div class="loading">
</div>
</body> </html>
css3实现不同的loading的更多相关文章
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- CSS3订单提交按钮Loading代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- 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实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
随机推荐
- js调试console.log使用总结图解
一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你j ...
- Project 2013 安装找不到office.zh cn的解决办法
先按照百度的办法,去“C:\Users\<你的电脑名>\AppData\Local\Temp\”下找类似“OWPFD24.tmp”的文件夹,结果发现并没有这个文件夹 , 没办法,自己硬着头 ...
- Understanding about numerical stability, convergence and consistency
In a computer simulation of the real world, physical quantities, which usually have continuous distr ...
- [转]编程珠玑第五章二分搜索(折半查找)之java实现
http://blog.csdn.net/hwe_xc/article/details/51813080 二分搜索又称为折半查找,用来高效快速的解决如下问题: 我们需要确定排序后的数组x[0..n-1 ...
- asp.net MVC5为WebAPI添加命名空间的支持
前言 默认情况下,微软提供的MVC框架模板中,WebAPI路由是不支持Namespace参数的.这导致一些比较大型的项目,无法把WebApi分离到单独的类库中. 本文将提供解决该问题的方案. 微软官方 ...
- YII框架增删改查常用语句
//实例化db $db = new \yii\db\Query(); //插入 $db->createCommand()->insert('user', [ 'name' => 't ...
- {}动态规划}记忆化dp
先搞个模板 #include<stdio.h> #include<string.h> using namespace std; typedef long long ll; ]; ...
- Trident中的解析包含的函数操作与投影操作
一:函数操作 1.介绍 Tuple本身是不可变的 Function只是在原有的基础上追加新的tuple 2.说明 如果原来的字段是log,flag 新增之后的tuple可以访问这些字段,log,fla ...
- (转)thymeleaf中的判断总结
判断String字符串,添加引号 th:class="${flag=='forum.html'}?'active'" 判断boolean类型,注意不能当成字符串处理,不能添加引号 ...
- Unable to load configuration. - action - file:/F:/apache-tomcat-8.0.30/webapps/test1Struts2/WEB-INF/classes/struts.xml:11:71
Unable to load configuration. - action - file:/F:/apache-tomcat-8.0.30/webapps/test1Struts2/WEB-INF/ ...