進(jìn)度條效果做為網(wǎng)站常用模塊無論是投資理財類、還是眾籌類、加載提示類網(wǎng)站已經(jīng)比較常見。另外，HTML5新增了 progress 標(biāo)簽，其重要程度可見一斑。
成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的網(wǎng)站建設(shè)、網(wǎng)站制作質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式營銷型網(wǎng)站需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價值！
由于HTML的 progress 存在兼容性問題，本文主要講解如何通過CSS實現(xiàn)一個簡單的自定義進(jìn)度條效果！
前端開發(fā)常用的進(jìn)度條效果如下：
（環(huán)形進(jìn)度條下次再講！）
這兩個算是比較有代表性的，一個的均勻的一個的不均勻的，實現(xiàn)起來略有不用。
以第一個為例：
這種比較簡單，只需要兩個 div 標(biāo)簽就可以了（一個標(biāo)簽也可以實現(xiàn)，后文會講到）
原理介紹：
外層 div 用來顯示進(jìn)度條總長度以及背景色；內(nèi)層div用來顯示當(dāng)前進(jìn)度條進(jìn)度，和當(dāng)前進(jìn)度條顏色。
結(jié)構(gòu)如下：
樣式如下：
此時效果如下：
只需要利用 js 動態(tài)控制上層 div 的寬度就可以實現(xiàn)最簡單的自定義進(jìn)度條了.
** 第二種帶原點的進(jìn)度條 **
此時實現(xiàn)原理跟第一種類似，只是背景色替換成了背景圖片，圖片如下：
這兩個圖片除了顏色不一樣以外其他是一樣大小的！
如果上面的能理解我想這個就不難理解了吧，不過為了顯得文章完整還是簡單做一個demo如下：
效果如下：
如果是百分比的話，可以在進(jìn)度條span上寫樣式。
span style="width:60%"/span
這個60可以由開發(fā)傳值過來。
不過建議你把需求說詳細(xì)一點。
ajax的表單提交只能提交data數(shù)據(jù)到后臺，沒法實現(xiàn)file文件的上傳還有展示進(jìn)度功能，這里用到form.js的插件來實現(xiàn)，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結(jié)構(gòu)， #upload-input-file 的input標(biāo)簽是真實的文件上傳按鈕，包裹form標(biāo)簽后可以實現(xiàn)上傳功能， #upload-input-btn 的button標(biāo)簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 里面， .progress 是進(jìn)度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進(jìn)度條的主體， .progress-bar-status 是進(jìn)度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input里面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網(wǎng)
1、寫一個樣式為.containe的div用來包含進(jìn)度條，其次是用樣式為.title的div來包裹標(biāo)題。
2、接下來，添加樣式為.bar的di來包含填充和未填充的進(jìn)度條樣式。最后，在.bar里添加樣式為.bar-unfill
和.bar-fill的span標(biāo)簽。
Plain
3.簡單的進(jìn)度條的CSS代碼.container?類里將?width?定義為?30%?使進(jìn)度條能夠自適應(yīng)。放一些簡單的?border-radius?之類的屬性在我們的?.title?類里以修改頂部和底部的左邊的邊框弧度，創(chuàng)建一個簡單明了的平板式設(shè)計。
.container?{
width:30%;
margin:0?auto
}
.title?{
background:#545965;
color:#fff;
padding:15px;
float:left;
position:relative;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px
}
4.首先建一個白色的背景
.bar-unfill?{height:15px;display:block;background:#fff;width:100%;border-radius:8px}
5.定義進(jìn)度條的樣式，先令他的寬度為?100%?，因為這也會應(yīng)用于定義和未定義的部分。所以在我們的?.bar-fill?的類里，令他的寬度為?0?作為起始的寬度，添加CSS3的?transition?屬性使動畫效果更加流暢，最后，我們將添加CSS3里的?animation?屬性，定義動畫的名字，和?duration?和?animation-iteration-count?屬性。
.bar-fill?{
height:15px;
display:block;
background:#45c9a5;
width:0;
border-radius:8px;
-webkit-transition:width?.8s?ease;
-moz-transition:width?.8s?ease;
transition:width?.8s?ease;
-webkit-animation:progressbar?7s?infinite;
animation:progressbar?7s?infinite
}
6.使用CSS3里的?@keyframe?規(guī)則來設(shè)置寬度從?0?變化到?100%?。你也能定制你自己喜歡的變化。
@-webkit-keyframes?progressbar?{?
from?{
width:0
}
to?{
width:100%
}
}
/*?Standard?syntax?*/
@keyframes?progressbar?{
from?{
width:0
}
to?{
width:100%
}
}
7.條紋進(jìn)度條，應(yīng)該把?.bar-fill?重新命名為?.bar-fill-stripes?。使用?backgrou-image?屬性里的?linear-gradient?同時聲明它的顏色。剩余的CSS3動畫效果也是和上述相同，看下面的代碼：
.bar-fill-stripes?{
height:15px;
display:block;
background:#e74c3c;
width:0;
border-radius:8px;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2)?25%,transparent?25%,transparent?50%,rgba(255,255,255,.2)???50%,rgba(255,255,255,.2)?75%,transparent?75%,transparent);
-webkit-transition:width?.8s?ease;
-moz-transition:width?.8s?ease;
transition:width?.8s?ease;
-webkit-animation:progressbar?7s?infinite;
animation:progressbar?7s?infinite
}
追蹤
Tracker
8.最后產(chǎn)生動畫效果
.track-wrap?{
position:relative;
top:-18px;
-webkit-animation:progressbar2?7s?infinite;
animation:progressbar2?7s?infinite
}
.track?{
height:20px;
display:block;
background:#e74c3c;
width:20px;
border-radius:10px;
position:relative;
left:-12px
}
@-webkit-keyframes?progressbar2?{
from?{
left:0
}
to?{
left:100%
}
}
/*?Standard?syntax?*/
@keyframes?progressbar2?{
from?{
left:0
}
to?{
left:100%
}
我只說思路：
1。點擊位置時，要判斷點擊點的位置，所處進(jìn)度條的百分比。
2.用這個百分比和時長相乘，
3.設(shè)置播放位置（currentTime）
4. 播放
重慶分公司
重慶分公司
