demo-進度條

時間 2019-11-10

標籤 demo 進度简体版

原文原文鏈接

進度條demo,粘貼複製代碼直接用。html

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。