本文實(shí)例為大家分享了javascript+css實(shí)現(xiàn)進(jìn)度條效果的具體代碼，供大家參考，具體內(nèi)容如下

主要是以樣式實(shí)現(xiàn)進(jìn)度條的效果，JavaScript控制顯示的百分比

html模板

<div class='progress_area'> <span class='progress_bac'></span></div><input type='button' value='100%' οnclick='progress(100);'/><input type='button' value='86%' οnclick='progress(86);' /><input type='button' value='20%' οnclick='progress(20);'/>

css:

.progress_area{ width: 255px; height: 13px; border: 1px solid #ccc; border-radius: 15px; margin-bottom: 30px;}.progress-inp{ width: 60px; height: 28px; border: 1px solid #ccc; background: #62c7ef; border-radius: 8px; color: white; cursor: pointer; outline:none;}.progress_bac{ display: block; height: 100%; width: 50%; background: #83a4f1; border-radius: 10px;}

實(shí)現(xiàn)的效果：

感覺這個進(jìn)度條顯示的特別生硬；之后通過box-shadow對它加了個陰影效果：

box-shadow有6個參數(shù)：

box-shadow:inset x-offset y-offset blur-radius spread-radius color 分別為：投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色

css:

.progress_bac{ display: block; height: 100%; width: 50%; background: #83a4f1; border-radius: 10px; -moz-box-shadow:0px 0px 7px 0px #4486ca; -webkit-box-shadow:0px 0px 7px 0px #4486ca; box-shadow:0px 0px 7px 0px #4486ca;}

效果：

陰影的顏色可以自定義，通過box-shadow可以實(shí)現(xiàn)高亮的效果，多多嘗試；

在點(diǎn)擊下方按鈕的時候，進(jìn)度條會顯示對應(yīng)的值，到指定的位置，但是通過之上的代碼來看，當(dāng)點(diǎn)擊按鈕的時候進(jìn)度條是一下子就到了指定的位置，沒有過度的效果；

通過javascript和css兩種方式來實(shí)現(xiàn)：

css：

css來實(shí)現(xiàn)很簡單，css中有個參數(shù)叫transition動畫效果，通過改變改參數(shù)的寬度的動畫效果，很簡單的就實(shí)現(xiàn)出來

.progress_bac{ display: block; height: 100%; width: 50%; background: #83a4f1; border-radius: 10px; -moz-box-shadow:0px 0px 7px 0px #4486ca; -webkit-box-shadow:0px 0px 7px 0px #4486ca; box-shadow:0px 0px 7px 0px #4486ca; -moz-transition: width 0.5s; -webkit-transition: width 0.5s; transition: width 0.5s;}

javascript：

js實(shí)現(xiàn)的方式就有多種了可以寫個循環(huán)可以寫個定時器：以下代碼就是用定時器寫的；

function progress(value){ if ( value ){ var num = ''; var loader_progress = setInterval(function(){ num++; document.getElementById('progress').style.width = num+'%'; if ( num == value ){ clearInterval(loader_progress); } },10); }};

以上是簡單的實(shí)現(xiàn)進(jìn)度條方式；修改css可以使進(jìn)度條展示不同的效果，這就需要一點(diǎn)點(diǎn)的調(diào)了；