<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. 【动态规划】XMU 1588 01序列计数

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1588 题目大意: 给n1个0和n2个1,连续的0不超过k1个,连续的1不超过k2个.问 ...

  2. adb Logcat用法

    转自: http://blog.csdn.net/tiantianshangcha/article/details/6288537 个人认为有一下几个常用命令: adb logcat -b radio ...

  3. php显示日期（今天、昨天、本周、上周、本月、上月、）

    <?php //今天 $today = date("Y-m-d"); //昨天 $yesterday = date("Y-m-d", strtotime( ...

  4. jvm之内存分配与回收策略

    1.java堆中各代分布 (1)Young:主要是用来存放新生的对象. (2)Old:主要存放应用程序中生命周期长的内存对象. (3)Permanent:是指内存的永久保存区域,主要存放Class和M ...

  5. 苹果iOS操作系统整体架构层次讲解

     iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa Touch ...

  6. android Json解析详解

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语 言的支持),从而可以在不同平台间进行数 ...

  7. Java 编程的动态性，第 7 部分: 用 BCEL 设计字节码--转载

    在本系列的最后三篇文章中,我展示了如何用 Javassist 框架操作类.这次我将用一种很不同的方法操纵字节码——使用 Apache Byte Code Engineering Library (BC ...

  8. Underscore.js 常用类型判断以及一些有用的工具方法

    1. 常用类型判断以及一些有用的工具方法 underscore.js 中一些 JavaScript 常用类型检查方法,以及一些工具类的判断方法. 首先我们先来谈一谈数组类型的判断.先贴出我自己封装好的 ...

  9. 95秀-弹窗+listview+动画 示例

    Dialog布局 dialog.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLay ...

  10. apache也可以做负载均衡，跟nignx的区别是什么？

    后续更新中.. 参考 http://zhumeng8337797.blog.163.com/blog/static/100768914201242211633248/ 比较 http://zhan.r ...