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

最新推荐文章于 2024-06-09 09:49:42 发布

飞鸟jiang

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量2k

点赞数 1

分类专栏： web前端文章标签： html5 进度条 jQuery

本文链接：https://blog.csdn.net/u012882577/article/details/51536387

版权

web前端专栏收录该内容

1 篇文章 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>

飞鸟jiang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单易用的进度条基于HTML5实现

Insert title here .jdtbox { padding: 10px 0; } .jdt_dbg { background: #fce5e5; width: 196px; height: 18px; border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden; bo
复制链接

扫一扫