html进度条实现方案,两种进度条实现方案的对比
html沒有專門的進度條控件，要顯示出進度條的效果，必須要進行自定義。同行的方法是，用兩個元素進行疊加(兩元素關(guān)系為兄弟或者父子關(guān)系)，兩元素高度保持一致，其中一個作為背景，長度不變，另一個放置在前面，而長度可變，從而實現(xiàn)進度條的效果。
可以參看如下效果圖：
一般進度條效果.png
其實現(xiàn)代碼如下：
.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;
}
0B/100MB
var maxSize = 100;//最大值設(shè)置為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);//設(shè)置大小為50M
};
由程序和圖我們可以知道進度條設(shè)置的大小為50M也就是進度為50%時的效果，當我們講設(shè)置參數(shù)改為5M時，顯示效果會如何呢？
進度條效果(二).png
效果圖的顯示，并不理想，進度條與圓角背景形狀上明顯不一致。也就是說當進度條短到一定層度時，圓角的形狀會不如預(yù)期的好，由CSS的設(shè)置可知，進度條的高度固定，長度過短，甚至小于圓角半徑，形狀顯示出現(xiàn)錯誤。我們希望看到的是類似于一個垂直放置的樹葉的形狀，由兩條弧形邊界組成。然而直接使用傳統(tǒng)的HTML元素似乎很難做到。
HTML5 為我們提供了一種解決方案，就是使用SVG來繪制內(nèi)部進度條，實現(xiàn)方案很簡單，替換部分代碼即可。
.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;
}
0B/100MB
var maxSize = 100;//最大值設(shè)置為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);//設(shè)置大小為5M
};
換用svg后的效果圖如下：
進度條效果(三).png
svg是html5開始支持的一種圖形功能，其繪圖功能非常強大，這里只是其最簡單的一種應(yīng)用，例如我們熟知的繪制圖表的庫HighCharts就是基于svg的，現(xiàn)在正在學(xué)習(xí)階段，以后有機會會做更多的介紹。
總結(jié)
以上是生活随笔為你收集整理的html进度条实现方案,两种进度条实现方案的对比的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux下c和cuda混合编译，并生成
- 下一篇： Linux动态链接库的使用