CSS3 加载进度样式

<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>

  

时间: 2024-08-27 12:21:43

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

刚入前端整合的一个手机端页面适配+预加载+获取资源加载进度等的一个小模板

刚入前端不久,之前主要学的是pc端的布局,到公司之后负责的主要是移动段页面,刚开始时为了使页面适应移动端不同的屏幕大小采用的是百分比加媒体查询的方式,做完一个项目之后,感觉非常不好,虽然最后也基本使页面做到了适配.所以做完这个项目之后,我就在网上查找各种屏幕适配的方案,最终找到了一个通过js控制使页面整体缩放的方案,还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案.目前我在使用的是缩放的方案.整体代码基本上是整合的是大牛们分享的一些实用代码,如有什么bug欢迎提出,共同进

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

原文:WPF 客户端浏览器 添加Loading加载进度 在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此需要一个加载进度/加载失败的显示界面. 加载进度显示 界面显示 1. 界面显示,加载进度样式可参考: 绕圈进度条 2. 添加Loading状态枚举.不加载/加载中/加载失败 1 public enum LoadingState 2 { 3 No

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

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务,网页加载等:如果有使用html5为手机布局的,也可以用于手机中~ 效果图: 1.html结构: <div id="loadBar01" class="loadBar"> <div> <span class="percent&qu

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

一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器的进度条</title> <script src="../js/jquery-3.2.1.j

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript">

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

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NProgress.js NProgress是基于jquery的,且版本要 >1.8 API: NProgress.start() — 启动进度条 NProgress.set(0.4) — 将进度设置到具体的百分比位置 NProgress.inc() — 少量增加进度 NProgress.done() 

你没见过吧?16款形态各异的加载进度条设计

互联网连接越来越快,但难免有一些时刻需要我们等待.在这种情况下,创意的设计师尽力减轻用户等待的痛苦,苦思敏想设计各种创意的进度条(或加载条)效果 ,让用户等待的过程变得更加愉悦. 您可能感兴趣的相关文章 22套 Web & Mobile PSD 用户界面素材 45套精美的手机界面设计素材和设计工具 分享30套精美的Web和手机开发UI素材 60个精美的免费移动开发PSD素材资源 45套新鲜出炉的精美 PSD 网页设计素材 Loading by pearlsomani Flat Loading B