.loader {
margin: 6em auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

html:

<div class="load-container load8">
<div class="loader">加载中...</div>
<a href="#load8">< 源代码 ></a>
</div>

css3加载中的更多相关文章

  1. 纯CSS3技术 加载中

    你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html  <div class="loader">加载中...</div> css: 图( ...

  2. css3动画-加载中...

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...

  3. css3加载ing动画

    项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function ...

  4. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  5. WebView 一直展示加载中。。。

    webview加载html5页面总是一直在加载中,加载很慢或干脆加载不出来, 听浏览器的大牛说可能是 js导致的,尝试在onpause里加入mWebView.pauseTimers(), onResu ...

  6. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  7. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  8. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  9. discuz微社区 始终显示“正在加载中”

    使用DZ的tools工具一键关闭所有插件后,帮我排查了js冲突的问题,但是也带来了一系列后患: 云平台连“QQ互联”也失效了,之前云平台的各项业务已经不正常,无法开启关闭,提示“远程接口无法调用... ...

随机推荐

  1. Network Load Balancing Technical Overview--reference

    http://technet.microsoft.com/en-us/library/bb742455.aspx Abstract Network Load Balancing, a clusteri ...

  2. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  3. 从URI中获取实际的文件path

    如题,经常用在onActivityResult方法中解析图片等各种地址,因为Android 4.4之后google更改了对应的方法. /** * Get a file path from a Uri. ...

  4. WEB开发时Browser控件得到C:\fakepath\ 的解决方式

    IE9中JS获得文件上传控件的路径不对,为:C:\fakepath\ 原来要修改:  工具 -> Internet选项 -> 安全 -> 自定义级别 -> 将本地文件上载至服务 ...

  5. 关于block块使用的6点注意事项

    对于刚学习OC新伙伴,block块一直都是一个比较纠结.比较难懂的知识点,不过,在使用一段时间后,就会感觉很酸爽.block块的原理及使用我就不再赘述,网上有很多这方面的资料.我个人使用这么长时间以来 ...

  6. 解决IE浏览器IFrame对象内存不释放问题

    最近项目组发现在使用showModalDialog弹出窗体中如果包含IFrame对象,则IFrame对象占用的内存资源在窗体关闭后不会释放.弹出关闭反复多次后,IE浏览器内存占用可超过数百M,严重时I ...

  7. linux命令之解压与压缩

    解压 tar –xvf file.tar //解压 tar包 tar -xzvf file.tar.gz //解压tar.gz tar -xjvf file.tar.bz2 //解压 tar.bz2 ...

  8. 用crontab、crond在嵌入式系统中添加定时任务

    在嵌入式系统中,定时任务通过crond和cronttab两个系统命令来联合执行. 其中crond是定时任务的守护进程,系统开始时是没有开启的.crontab主要作用是管理用户的crontab file ...

  9. SETLOCAL

    Quote from: http://ss64.com/nt/setlocal.html SETLOCAL Set options to control the visibility of envir ...

  10. c++primer复习(一)

    1 const对象默认为文件的局部变量(P50) a.cpp ; b.cpp extern int a;//undefined reference to "a" a.cpp ; b ...