最近需要寫一個進度條的效果，網上找了一些，但都不能完美的實現(xiàn)需求。

于是就自己改造了一個，效果如下圖：

因為動態(tài)圖太大，我上傳到 GitHub 了，就不在博客上再上傳了。

百分比跟隨進度條移動，百分比數(shù)字也隨之變化。

進度條動畫效果可選，顏色可根據(jù)自己的需求修改。

代碼如下：

html：

0%

JS：需要引jQuery

var?a?=?0,

timer?=?setInterval(function?()?{

a++?//10-11秒?a+=10=>1-2秒

$(".progress-value").html(a?+?"%");

$(".progress-bar").width(a?+?"%");

if?(a?==?80)?{

clearInterval(timer);//清除定時器

$(".progress-bar").removeClass("active");

location.href?=?"#";//跳轉鏈接

}

},?100);

CSS：.progress?{

height:?20px;

background-color:?#f5f5f5;

-webkit-box-shadow:?inset?0?1px?2px?rgba(0,?0,?0,?.1);

box-shadow:?inset?0?1px?2px?rgba(0,?0,?0,?.1);

overflow:?visible;

border-radius:?20px;

margin:?80px?20px;

}

.progress?.progress-bar?{

position:?relative;

float:?left;

width:?0;

height:?100%;

font-size:?12px;

line-height:?20px;

color:?#fff;

text-align:?center;

-webkit-box-shadow:?inset?0?-1px?0?rgba(0,?0,?0,?.15);

box-shadow:?inset?0?-1px?0?rgba(0,?0,?0,?.15);

-webkit-transition:?width?.6s?ease;

-o-transition:?width?.6s?ease;

transition:?width?.6s?ease;

border-radius:?20px;

background-color:?#001ff8;

}

.progress?.progress-value?{

box-sizing:?border-box;

background-clip:?content-box;

display:?block;

height:?42px;

line-height:?38px;

width:?42px;

text-align:?center;

border-radius:?50%;

font-size:?13px;

color:?#fff;

padding:?2px;

background-color:?#214eff;

border:?1px?solid?#214eff;

position:?absolute;

top:?-60px;

right:?-15px;

}

.progress?.progress-value:after?{

content:?"";

border-top:?10px?solid?#214eff;

border-left:?8px?solid?transparent;

border-right:?8px?solid?transparent;

position:?absolute;

bottom:?-12px;

left:?12px;

}

/*動畫效果*/

@-webkit-keyframes?progress-bar-stripes?{

from?{

background-position:?35px?0;

}

to?{

background-position:?0?0;

}

}

@keyframes?progress-bar-stripes?{

from?{

background-position:?35px?0;

}

to?{

background-position:?0?0;

}

}

/*背景效果*/

.progress-bar-striped,?.progress-striped?.progress-bar?{

background-image:?-webkit-linear-gradient(45deg,?rgba(255,?255,?255,?.15)?25%,?transparent?25%,?transparent?50%,?rgba(255,?255,?255,?.15)?50%,?rgba(255,?255,?255,?.15)?75%,?transparent?75%,?transparent);

background-image:?-o-linear-gradient(45deg,?rgba(255,?255,?255,?.15)?25%,?transparent?25%,?transparent?50%,?rgba(255,?255,?255,?.15)?50%,?rgba(255,?255,?255,?.15)?75%,?transparent?75%,?transparent);

background-image:?linear-gradient(45deg,?rgba(255,?255,?255,?.15)?25%,?transparent?25%,?transparent?50%,?rgba(255,?255,?255,?.15)?50%,?rgba(255,?255,?255,?.15)?75%,?transparent?75%,?transparent);

-webkit-background-size:?35px?35px;

background-size:?35px?35px;

}

.progress-bar.active,?.progress.active?.progress-bar?{

-webkit-animation:?progress-bar-stripes?2s?linear?infinite;

-o-animation:?progress-bar-stripes?2s?linear?infinite;

animation:?progress-bar-stripes?2s?linear?infinite;

animation-duration:?2s;

animation-timing-function:?linear;

animation-delay:?0s;

animation-iteration-count:?infinite;

animation-direction:?normal;

animation-fill-mode:?none;

animation-play-state:?running;

animation-name:?progress-bar-stripes;

}

我將完整的頁面上傳到我的 GitHub 上面了，有需要的可以去下載：點擊訪問

總結

以上是生活随笔為你收集整理的html百分比代码怎么写,参考Bootstrap写的一个带百分比的进度条（附源码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。