如何使用CSS3制作一个简单的进度条

如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。

创新互联自2013年起，先为江州等服务建站，江州等地企业，进行企业商务咨询服务。为江州企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

如何用纯CSS编写一个实用的进度条

1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。

2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill

和.bar-fill的span标签。

Plain

3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。

.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.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .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 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。

@-webkit-keyframes progressbar { 

from {

width:0

}

to {

width:100%

}

}

/* Standard syntax */

@keyframes progressbar {

from {

width:0

}

to {

width:100%

}

}

7.条纹进度条，应该把 .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.最后产生动画效果

.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%

}

如何使用CSS3制作进度条的简单示例代码

p id="se_lev"安全级别 ：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);

原理：大盒子里套个小盒子，

大盒子给固定宽

小盒子的宽用%表示，（利用宽度的继承性，比如50%，就只有大盒一半宽）

这个css 里的50% 将来是要用来用js动态化的，一但动态起来，就达成了进度条的效果了

怎么用css制作进度条？

如果是百分比的话，可以在进度条span上写样式。

span style="width:60%"/span

这个60可以由开发传值过来。

不过建议你把需求说详细一点。

分享几种极具创意的HTML5/CSS3进度条特效

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结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。

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%);

}

网站名称：css样式进度,css进度条代码
本文网址：http://csdahua.cn/article/dsdcoid.html