css3加载spinner
使用代码制作一个加载旋转器spinner
实现的原理是:
1.两个圆圈,其中一个圆圈是使用pseudo元素(:before)产生
2.由pseudo元素生成的圆通过负数的z-index而作用在下面
3.由pseudo元素生成的圆圈有内置的阴影inset box-shadow
4.普通的圆圈有普通的阴影 regular box-shadow
5.“loading”是有overflow:hidden的strong标签
5.strong标签的长度由keyframe设置成动画,无限的reveal
6.文本通过line-height等于height的方法来垂直居中
7.旋转器是一个三角性,放在普通圆圈下面,以及放在由pseudo元素生成的圆圈的上面。
8.三角形通过keyframe设置成从0到360度无限旋转的动画。
理想状态下,三角形也应该设置成由pseudo元素生成,但是不幸的是到目前为止pseudo元素不支持动画。firefox可以transition它们,但是不能通过keyframe来设置动画(至少到目前为止不可以)。
效果图地址:https://css-tricks.com/examples/Loading/
html:
<!DOCTYPE html>
<html> <head>
<meta charset='UTF-8'> <title>Loading Thingy (WebKit)</title> <link rel='stylesheet' href='css/style.css'> <style>
#loading {
margin: 80px auto;
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #ccc;
font: 12px "Lucida Grande", Sans-Serif;
text-align: center;
line-height: 100px;
color: white;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5); }
#loading:before {
content: "";
position: absolute;
left: -20px;
top: -20px;
bottom: -20px;
right: -20px;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
background: #eee;
z-index: -2;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#loading span {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid rgba(255,255,255,0.7);
z-index: -1;
top: -28px;
left: 0px;
-webkit-animation: ticktock 5s linear infinite;
-webkit-transform-origin: 50px 80px;
}
#loading strong {
overflow: hidden;
display: block;
margin: 0 auto;
-webkit-animation: expand 2.5s linear infinite;
} @-webkit-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
} @-webkit-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
} </style> </head> <body> <div id="demo-top-bar"> <div id="demo-bar-inside"> <h2 id="demo-bar-badge">
<a href="/">CSS-Tricks Example</a>
</h2> <div id="demo-bar-buttons">
</div> </div> </div>
<div id="page-wrap"> <div id="loading"><strong>loading...</strong><span></span></div> </div> <style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body> </html>
css:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/ * { margin:; padding:; }
body { font: 14px Georgia, serif; } article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; } #page-wrap { width: 960px; margin: 150px auto; }
原文:https://css-tricks.com/css3-loading-spinner/
css3加载spinner的更多相关文章
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- css3加载ing动画
项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function ...
- javascript,css3加载动画
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- CSS3加载动画
图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图: 图2 代码: 使用1个名为'l ...
- css3加载中
.loader { margin: 6em auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1 ...
- 兼容ie10及以上css3加载进度动画
html <div class="spinner"> <div class="rect1"></div> < ...
- css3 加载动画效果
Loading 动画效果一 HTML 代码: <div class="spinner"> <div class="rect1&quo ...
- CSS3 加载进度样式
<html> <head> <style type="text/css"> body{ background-color: green; } . ...
随机推荐
- HDU 5273 区间DP
输入一组数,m次询问 问每一个询问区间的逆序数有多少 区间DP简单题 #include "stdio.h" #include "string.h" int dp ...
- diamond源码阅读-目录监控
PathNode(Path)StandardWatchEventKind(WatchEvent)Watchable(WatchKey WatchService WatchEvent)WatchKey( ...
- Windows下搭建React Native Android开发环境
准备工作 安装JDK 安装Android SDK 安装C++环境 安装node.js 安装react-native命令行工具 创建项目 运行packager 运行模拟器 安卓运行 安卓调试 安装JDK ...
- iOS开发之提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploading this package
iOS开发之提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploadin ...
- 大海教你学手游2015CocosLua第一季_02场景跳转和用户触摸
: 课程地址:http://ke.qq.com/cgi-bin/courseDetail?course_id=78017 cocos2d-x直播课交流群: 461039382(公布每节课视频和资料) ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- task10-14
[说明]今天白天有事外出了,晚上会图书馆做了下面的任务,时间有点紧,好多没完成,明天要补上今天的! 一:今日完成 10.插入10条数据,查看有索引和无索引的情况下,Sql语句执行的效率 1)插入数据时 ...
- 九度OJ 1251:序列分割 (DFS)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:166 解决:34 题目描述: 一个整数数组,长度为n,将其分为m份,使各份的和相等,求m的最大值 比如{3,2,4,3,6} 可以分成{ ...
- Python菜鸟之路:Python基础-Socket基础-1
预热知识 OSI 七层模型 谈到TCP/IP,就不得不说OSI七层模型,OSI 是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放式互连信息系统提供 ...
- python数据分析之:时间序列二
将Timestamp转换为Period 通过使用to_period方法,可以将由时间戳索引的Series和DataFrame对象转换为以时期索引 rng=pd.date_range('1/1/2000 ...