<html>

	<head>

		<style type="text/css">

			body{

				background-color: green;

			}

			.circle{

				margin:0 auto;

				margin-top:150px;

				background-color: gray;

				width: 10em;

				height: 10em;

				border-radius: 50%;

				border: 1.1em solid rgba(255,255,255,0.2);

				border-left-color:#fff;

				-webkit-animation: load 1.1s infinite linear;

			}

			@-webkit-keyframes load{

				from{

					transform:rotate(0deg);

				}

				to{

					transform:rotate(360deg);

				}

			}

		</style>

	</head>

	<body>

		<div class="circle">

		</div>

	</body>

</html>

　　

CSS3 加载进度样式的更多相关文章

  1. 兼容ie10及以上css3加载进度动画

      html <div class="spinner">   <div class="rect1"></div>   < ...

  2. WPF 客户端浏览器 添加Loading加载进度

    在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...

  3. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  4. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  5. 【Demo】CSS3 动画 加载进度条

    实例结果图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. 【css系列】创建网页加载进度条

    一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...

  7. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  8. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  9. pace.js和NProgress.js两个加载进度插件的一点小总结

    这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...

随机推荐

  1. [log4j] 可用案例

    可用的 log4j 配置, log4j.properties log = /Users/grs/Documents/log4j log4j.rootLogger = DEBUG, FILEROLING ...

  2. XCode7中不能使用http的临时配置解决办法

    先看看iOS9新特性中关于ATS的官方文档: App Transport Security App Transport Security (ATS) enforces best practices i ...

  3. php几个不起眼儿的小技巧

    说是不起眼儿的小技巧,其实应该说是不常用的常规应用吧.很多事情就是这样,知道是一马事儿,会用是一马事儿,精习又是另外一马事儿.而成为高手更是需要扎实的基本功. str_repeat 重复输出字符串就靠 ...

  4. shell编程(一)－－常用变量及表达式

    $? 表示执行上一个命令的返回值:如果为0表示执行成功,非0表示执行失败$1.$2.... 分别表示参数1.参数2....$# 表示这个程序的参数个数$*/$@ 表示这个程序的所有参数$$ 表示这个程 ...

  5. 使用Cordova框架把Webapp封装成Hybrid App实践——Android篇

    公司没有IOS和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成.记录一下从中遇到的问题和需要用到的开发环境的配置 将Webapp ...

  6. NDN与TCP/IP

    搬运自http://blog.csdn.net/programmer_at/article/details/49203241  当前TCP/IP协议存在哪些问题?如何改进? 当时没有回答好,然后提到了 ...

  7. Cocos2D-X2.2.3学习笔记12(瞬间动作)

    到眼下我们已经学习了有 坐标系统 内存管理 UI系统 事件处理 几何图形 今天我们来学习动作管理OK 我们来看看类结构图 CCAction   全部动作的基类 以下派生了三个子类:CCFiniteTi ...

  8. Sandcastle Help File Builder使用教程

    Sandcastle Help File Builder相信很多的园友用过,小弟我最近因为工作原因需要生成公司的一套SDK的帮助文档,因此找了一些资料,发现网上的资料很多,但是都不怎么完全,有些只是随 ...

  9. java基本打印练习《我行我素购物系统》

    public class ShoppingSystem{ public static void main(String[] args){ //System.out.println("**** ...

  10. 《node.js开发指南》读书笔记（一）

    在开发时如果修改了js内容,不能通过刷新浏览器直接看到效果,必须通过重启nodejs程序才能看到,这样显然不利于开发调试,supervisor可以实现这个功能,监视对代码的改动,并自动重启nodejs ...