如果不考慮IE的話(huà)，用css3應(yīng)該不難：1、邊框用背景圖或純色都可以，配合圓角和陰影；2、里面的進(jìn)度條可以用垂直方向的線(xiàn)性漸變及陰影配合實(shí)現(xiàn)；3、最后配合js動(dòng)態(tài)修改里面進(jìn)度條div的寬度和文字的顯示即可。
創(chuàng)新互聯(lián)自2013年起，先為江州等服務(wù)建站，江州等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為江州企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
1、寫(xiě)一個(gè)樣式為.containe的div用來(lái)包含進(jìn)度條，其次是用樣式為.title的div來(lái)包裹標(biāo)題。
2、接下來(lái)，添加樣式為.bar的di來(lái)包含填充和未填充的進(jìn)度條樣式。最后，在.bar里添加樣式為.bar-unfill
和.bar-fill的span標(biāo)簽。
Plain
3.簡(jiǎn)單的進(jìn)度條的CSS代碼.container?類(lèi)里將?width?定義為?30%?使進(jìn)度條能夠自適應(yīng)。放一些簡(jiǎn)單的?border-radius?之類(lèi)的屬性在我們的?.title?類(lèi)里以修改頂部和底部的左邊的邊框弧度，創(chuàng)建一個(gè)簡(jiǎn)單明了的平板式設(shè)計(jì)。
.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.首先建一個(gè)白色的背景
.bar-unfill?{height:15px;display:block;background:#fff;width:100%;border-radius:8px}
5.定義進(jìn)度條的樣式，先令他的寬度為?100%?，因?yàn)檫@也會(huì)應(yīng)用于定義和未定義的部分。所以在我們的?.bar-fill?的類(lèi)里，令他的寬度為?0?作為起始的寬度，添加CSS3的?transition?屬性使動(dòng)畫(huà)效果更加流暢，最后，我們將添加CSS3里的?animation?屬性，定義動(dòng)畫(huà)的名字，和?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ī)則來(lái)設(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?同時(shí)聲明它的顏色。剩余的CSS3動(dòng)畫(huà)效果也是和上述相同，看下面的代碼：
.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)生動(dòng)畫(huà)效果
.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%
}
p id="se_lev"安全級(jí)別 ：span id="big"span id="min"/span/span高/p
span#big { vertical-align:middle; display:inline-block; margin-left:6px; margin-right:20px; width:183px; height:14px; border:2px solid #a4a4a4; border-radius:14px; behavior: url(PIE.htc);}
span#min { display:block; height:100%; width:70%; background:#fe0002; border-top-left-radius:14px; border-bottom-left-radius:14px; behavior: url(PIE.htc);
原理：大盒子里套個(gè)小盒子，
大盒子給固定寬
小盒子的寬用%表示，（利用寬度的繼承性，比如50%，就只有大盒一半寬）
這個(gè)css 里的50% 將來(lái)是要用來(lái)用js動(dòng)態(tài)化的，一但動(dòng)態(tài)起來(lái)，就達(dá)成了進(jìn)度條的效果了
如果是百分比的話(huà)，可以在進(jìn)度條span上寫(xiě)樣式。
span style="width:60%"/span
這個(gè)60可以由開(kāi)發(fā)傳值過(guò)來(lái)。
不過(guò)建議你把需求說(shuō)詳細(xì)一點(diǎn)。
section class="container"
div class="progress"
span style="width: 20%;"span20%/span/span
/div
div class="progress"
span class="green" style="width: 40%;"span40%/span/span
/div
div class="progress"
span class="orange" style="width: 60%;"span60%/span/span
/div
div class="progress"
span class="red" style="width: 80%;"span80%/span/span
/div
div class="progress"
span class="blue" style="width: 100%;"span100%/span/span
/div
/section
從HTML結(jié)構(gòu)中我們可以看出，類(lèi)名為progress的div是整個(gè)進(jìn)度條的父容器，里面的span則是當(dāng)前進(jìn)度，通過(guò)width來(lái)定義不同的進(jìn)度值，同時(shí)定義不同的顏色類(lèi)，比如orange，以便待會(huì)在CSS中進(jìn)行樣式渲染。
CSS代碼：
.progress {
height: 20px;
background: #ebebeb;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 10px;
}
.progress span {
position: relative;
float: left;
margin: 0 -1px;
min-width: 30px;
height: 18px;
line-height: 16px;
text-align: right;
background: #cccccc;
border: 1px solid;
border-color: #bfbfbf #b3b3b3 #9e9e9e;
border-radius: 10px;
background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress span span {
padding: 0 8px;
font-size: 11px;
font-weight: bold;
color: #404040;
color: rgba(0, 0, 0, 0.7);
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
.progress span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: 18px;
background: url("../img/progress.png") 0 0 repeat-x;
border-radius: 10px;
}
.progress .green {
background: #85c440;
border-color: #78b337 #6ba031 #568128;
background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
}
.progress .red {
background: #db3a27;
border-color: #c73321 #b12d1e #8e2418;
background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
}
.progress .orange {
background: #f2b63c;
border-color: #f0ad24 #eba310 #c5880d;
background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
}
.progress .blue {
background: #5aaadb;
border-color: #459fd6 #3094d2 #277db2;
background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
}
重慶分公司
重慶分公司
