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