demo-进度条

进度条demo,粘贴复制代码直接用。
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>进度条插件</title>
<style>
.progress { /* 总进度条 */
width: 200px;
height: 20px;
background-color: #ccc;
box-shadow: inset 0px 2px 4px 0px rgba(70, 85, 63, 0.16);
border-radius: 7px;
position: relative;
}

.progress .progress-bar { /* 进度 */
height: 20px;
width: 0;
background-color: #93db70;
border-radius: 7px;
 
}

.progress .progress-bar .progress-text {
color: #333;
position: absolute;
right: -40px;
top: -0;
}
</style>
</head>

<body>
<div class="progress">
<div class="progress-bar" id="progress_bar">
<div class="progress-text"></div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
/* 进度条 */
var setProgress = function (id,per,allWidth) {
$('#' + id).width(per * allWidth + 'px').children(".progress-text").html(per * 100 + "%");
};
setProgress('progress_bar',0.3,200); //id,小数,进度条总宽度
</script>
</html>