<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. COCI2014-2015CONTEST#7——POLICE

    http://www.hsin.hr/coci/archive/2014_2015/contest7_tasks.pdf [题目描述] 有N个书架,每个书架可以容纳M本书.给出了若干本书,每本书有一个 ...

  2. Delphi 多线程的操作

    Delphi 操作多线程的代码, 在项目中需要在webservice中使用多线程,程序思想如下: 1.就创建一个线程, 也就是说有两个线程,主线程和创建的线程, 主线程用于程序的别的操作,例如停止服务 ...

  3. Minimum Path Sum——LeetCode

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  4. [git] github 使用简单记录

    前提 :1. 已有 github 账号.2. 已安装 git .3. 在 github 和 本地 git 客户端交互秘钥.(这步我记得需要做,有点久远,不确定.) 正文: 下面是一个简单的例子.先在 ...

  5. C++ STL之string常用指令

    string,大小可变的字符串,有些类似于C中的字符数组. 只记载本人在ACM中常用的函数,并且全部经过程序测试. 1.初始化 string s1;——默认构造函数s1为空串 string s2(s1 ...

  6. Be Sociable, Share!

  7. H - Prince and Princess - HDU 4685(二分匹配+强连通分量)

    题意:有N个王子M个公主,王子喜欢一些公主,而且只能是王子喜欢的人,他们才可以结婚,现在让他们尽可能多的结婚的前提下找出来每个王子都可以和谁结婚. 分析:先求出来他们的最大匹配,因为给的数据未必是完备 ...

  8. B - I Hate It - hdu 1754

    Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟 ...

  9. 你需要知道的九大排序算法【Python实现】之插入排序

    三.插入排序 基本思想:插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中,从而得到一个新的.个数加一的有序数据,算法适用于少量数据的排序,时间复杂度为O(n^2).是稳定的排序方法.插入算 ...

  10. eclipse中新建maven项目

    maven是个项目管理工具,集各种功能于一身,下面介绍maven web项目在eclipse种的配置,并于tomcat集成.配置成功后,可以跟一般的web项目一样调试. 一.准备条件 1.安装下载jd ...