简单易用的进度条 基于HTML5实现

原创 2016年05月30日 10:59:38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
	.jdtbox {
		padding: 10px 0;
	}
	
	.jdt_dbg {
		background: #fce5e5;
		width: 196px;
		height: 18px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		overflow: hidden;
		border-top: 1px solid #f9d1d1;
	}
	
	.jdt_mbg {
		background: #f12938;
		height: 18px;
		width: 75%;
		height: 20px;
	}
</style>

<script type="text/javascript">
	$(function() {
		$(".jdt_mbg").animate({
			width : "50%",
		}, 1000);
	});
</script>
<body>

	<form action="http://192.168.1.106:8080/app/img/multiUpload" method="post" enctype="multipart/form-data" name="upload_form">
		<label>选择图片文件</label> 
		<input name="imgFile" type="file" multiple="multiple" accept="image/gif, image/jpeg" /> 
		<input name="upload" type="submit" value="上传" />
	</form>

	<div class="jdtbox">
		<div class="jdt_dbg">
			<div class="jdt_mbg" style="width: ${investDetail.percent*100"></div>
		</div>
	</div>
</body>
</html>

html5实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框

*{padding: 0; margin: 0} .box{ position: fixed; width: 100%; ...
  • wanlong360599336
  • wanlong360599336
  • 2015年06月10日 10:53
  • 20850

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

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务...
  • lmj623565791
  • lmj623565791
  • 2014年06月26日 12:06
  • 47279

HTml5 进度条实现,以及控制进度条加载速度

progress元素的使用 开始下载 var intValue = 0; var intTimer; var objPro = docu...
  • luoyang2
  • luoyang2
  • 2015年12月10日 16:11
  • 2621

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

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务...
  • pangchengyong0724
  • pangchengyong0724
  • 2016年07月25日 12:05
  • 902

HTML中的进度条标签的应用<progress>

HTML中进度条的实现,利用的是标签是,但是在HTML中还有一个标签是两者之间有怎样的区别,形似但是却不同的用途,当我们在写HTML文档的时候,我们一定要选择合适的标签。进度就是用标签在这个标签中常用...
  • datouniao1
  • datouniao1
  • 2015年08月08日 18:29
  • 2734

JS 实现简单进度条

第一次写博客,有点小鸡动。 因为做了一个导出Excel表格功能,但是现在数据多起来了,后台在从数据库读取出来,写入到Excel表格,这个过程会耗点时间,1W条数据大概要6秒左右吧,也不清楚,我是内网...
  • u013362554
  • u013362554
  • 2015年07月03日 11:23
  • 4238

html5 canvas 实现进度条展示统计数据

最终实现效果图: html代码: Line Chart Demo 预约挂号人数(
  • u012986736
  • u012986736
  • 2016年10月17日 16:28
  • 856

基于Html5的移动端APP开发框架

快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP...
  • u013408979
  • u013408979
  • 2016年08月30日 15:56
  • 17134

android 弹出进度条对话框的方法

实际代码是做和做FM闹钟相关功能,收藏防止以后查阅 [java] view plain copy new AlertDialog.Builder(this)...
  • u010164190
  • u010164190
  • 2016年07月11日 16:21
  • 1591

Android中实现执行耗时操作时弹出进度对话框

相信很多初学者都想实现这么一种功能,当我们登录支付宝时,在登录过程会弹出一个小小的旋转按钮,说明应用正在获取网络资源,正在执行耗时程序,那么这个功能怎么实现呢,其实非常简单,我们只需要一个简单地组件P...
  • zzjmay
  • zzjmay
  • 2014年03月23日 23:12
  • 2505
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单易用的进度条 基于HTML5实现
举报原因:
原因补充:

(最多只允许输入30个字)