html没有专门的进度条控件，要显示出进度条的效果，必须要进行自定义。同行的方法是，用两个元素进行叠加（两元素关系为兄弟或者父子关系），两元素高度保持一致，其中一个作为背景，长度不变，另一个放置在前面，而长度可变，从而实现进度条的效果。
可以参看如下效果图：
一般进度条效果.png
其实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<style>
.progress {
height: 16px;
width: 110px;
border-radius: 8px;
position: relative;
background-color: #d9d9d9;
display: inline-block;
top: 1px;
}
.progress-text {
font-size: 12px;
font-weight: normal;
line-height: 16px;
color: white;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.progress .loading {
height: 16px;
width: 100%;
border-radius: 8px;
position: absolute;
top: 0;
left: 0;
background-color: #12b7f5;
-webkit-transition: -webkit-transform .1s;
transition: -webkit-transform .1s;
transition: transform .1s;
transition: transform .1s,-webkit-transform .1s;
}
</style>
</head>
<body>
<span class="progress" >
<span class="loading" id = "capacity_progress"></span>
<span class="progress-text">0B/100MB</span>
</span>
<script type="text/javascript">
var maxSize = 100;//最大值设置为100M
function setProgress(size){
var progress = document.getElementById("capacity_progress");
var value = ((size/1024/1024)/maxSize)*progress.parentNode.clientWidth;
progress.style.width = value+'px';
$(".progress-text").text(convertSizeToStr(size)+'/'+maxSize+"MB");
}
function convertSizeToStr(size){
if(size > 1048576){
return (size/1048576).toFixed(2)+'MB';
}
else if(size > 1024){
return (size/1024).toFixed(1)+'KB';
}
else{
return size+'B';
}
}
window.onload = function (){
setProgress(50*1024*1024);//设置大小为50M
};
</script>
</body>
</html>
由程序和图我们可以知道进度条设置的大小为50M也就是进度为50%时的效果，当我们讲设置参数改为5M时，显示效果会如何呢？
进度条效果（二）.png
效果图的显示，并不理想，进度条与圆角背景形状上明显不一致。也就是说当进度条短到一定层度时，圆角的形状会不如预期的好，由CSS的设置可知，进度条的高度固定，长度过短，甚至小于圆角半径，形状显示出现错误。我们希望看到的是类似于一个垂直放置的树叶的形状，由两条弧形边界组成。然而直接使用传统的HTML元素似乎很难做到。
HTML5 为我们提供了一种解决方案，就是使用SVG来绘制内部进度条，实现方案很简单，替换部分代码即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<style>
.progress {
height: 16px;
width: 110px;
border-radius: 8px;
position: relative;
background-color: #d9d9d9;
display: inline-block;
top: 1px;
}
.progress-text {
font-size: 12px;
font-weight: normal;
line-height: 16px;
color: white;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.progress .loading {
height: 16px;
width: 100%;
border-radius: 8px;
position: absolute;
top: 0;
left: 0;
background-color: transparent; //此处颜色换成透明或者背景色#d9d9d9
-webkit-transition: -webkit-transform .1s;
transition: -webkit-transform .1s;
transition: transform .1s;
transition: transform .1s,-webkit-transform .1s;
}
</style>
</head>
<body>
<span class="progress" >
<svg class="loading">
<rect id = "capacity_progress" x="0" y="0" width="0" height="16" rx="8" ry="0" fill="#12b7f5">
</rect>
</svg>
<span class="progress-text">0B/100MB</span>
</span>
<script type="text/javascript">
var maxSize = 100;//最大值设置为100M
function setProgress(size){
var progress = document.getElementById("capacity_progress");
var value = ((size/1024/1024)/maxSize)*progress.parentNode.clientWidth;
progress.setAttribute('width',value);
$(".progress-text").text(convertSizeToStr(size)+'/'+maxSize+"MB");
}
function convertSizeToStr(size){
if(size > 1048576){
return (size/1048576).toFixed(2)+'MB';
}
else if(size > 1024){
return (size/1024).toFixed(1)+'KB';
}
else{
return size+'B';
}
}
window.onload = function (){
setProgress(5*1024*1024);//设置大小为5M
};
</script>
</body>
</html>
换用svg后的效果图如下：
进度条效果（三）.png
svg是html5开始支持的一种图形功能，其绘图功能非常强大，这里只是其最简单的一种应用，例如我们熟知的绘制图表的库HighCharts就是基于svg的，现在正在学习阶段，以后有机会会做更多的介绍。
网友评论