关闭

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

标签: html5进度条jQuery
840人阅读 评论(0) 收藏 举报
分类:
<!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>

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4418次
    • 积分:134
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条
    文章分类