<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>進度條</title>
<style text="text/css">
#frame .border{
width: 300px;
margin:10px 30px;
border:2px solid black;
height: 30px;
background-image: -moz-linear-gradient(top,#b0b0b0,#f8f8f8);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#b0b0b0),color-stop(1,#f8f8f8));
filter: progid:DXImageTransfrom.Microsoft.gradient(startColorstr='#b0b0b0',endColorstr='#f8f8f8',GradientType='0');
overflow: hidden;
position: relative;
border: 2px solid black;
border-bottom-width:4px;
border-top-width: 3px;
border-radius:50px;
}
#frame .border #bar{
width: 1%;
height: 100%;
background-image: -moz-linear-gradient(top,#b0b0b0,#f8f8f8);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#8efb3c),color-stop(1,#7ac478));
filter: progid:DXImageTransfrom.Microsoft.gradient(startColorstr='#8efb3c',endColorstr='#7ac478',GradientType='0');
/* -webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;*/
-webkit-transition:all 0.1s ease-in-out 0s;
transition:all 0.1s ease-in-out 0s;
}
#frame .border #persentage{
position: absolute;
left:0;
top:0;
width: 100%;
text-align: center;
padding:5px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="frame">
<div class="border">
<div id="bar">
</div>
<div id="persentage">
0%
</div>
</div>
</div>
<script type="text/javascript">
function Update () {
var frm = document.getElementById("frame")
var list = document.getElementsByTagName("div")
var bar = document.getElementById('bar')
var persentage = document.getElementById('persentage')
console.log(bar.style.width, '1')
if (bar.style.width === '') {
bar.style.width = '1%' // 設置寬度
} else {
console.log(parseFloat(bar.style.width))
bar.style.width = parseFloat(bar.style.width) + 1 + "%";
}
persentage.textContent = parseFloat(bar.style.width) + "%"
if (bar.style.width !== '100%') {
window.setTimeout('Update()', 100) // 設置超時
}
}
Update()
</script>
</body>
</html>
