189 8069 5689
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动态化的，一但动态起来，就达成了进度条的效果了
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%
}
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%);
}
进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外，HTML5新增了 progress 标签，其重要程度可见一斑。
由于HTML的 progress 存在兼容性问题，本文主要讲解如何通过CSS实现一个简单的自定义进度条效果！
前端开发常用的进度条效果如下：
（环形进度条下次再讲！）
这两个算是比较有代表性的，一个的均匀的一个的不均匀的，实现起来略有不用。
以第一个为例：
这种比较简单，只需要两个 div 标签就可以了（一个标签也可以实现，后文会讲到）
原理介绍：
外层 div 用来显示进度条总长度以及背景色；内层div用来显示当前进度条进度，和当前进度条颜色。
结构如下：
样式如下：
此时效果如下：
只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了.
** 第二种带原点的进度条 **
此时实现原理跟第一种类似，只是背景色替换成了背景图片，图片如下：
这两个图片除了颜色不一样以外其他是一样大小的！
如果上面的能理解我想这个就不难理解了吧，不过为了显得文章完整还是简单做一个demo如下：
效果如下：
你是要做个什么样子的，只要是进度条就行呢，还是要他能动起来
，要是只是个样式的话，网上多的很，要动起来的话，需要js
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
style type="text/css"
.box{ width:300px; height:10px; border-radius:5px; margin-top:20px; position:relative; background-color:#666}
.box1{ width:0; height:10px; border-radius:5px; background-color:#0C9; position:absolute; left:0; top:0;}
input{outline:none; color:#ccc;}
/style
/head
body
label请输入数字/label
input type="text" value="请输入数字" id="val2" onBlur="if(this.value==''){this.value='请输入数字';this.style.color='#ccc';}" onFocus="if(this.value=='请输入数字'){this.value='';this.style.color='#333'}" /
input type="button" value="提交" id="sub2" style="color:#000" /
div class="box"div class="box1" id="box1"/div/div
script type="text/javascript"
var val2 = document.getElementById("val2"),
box1 = document.getElementById("box1"),
sub2 = document.getElementById("sub2");
sub2.onclick=function(){
var val = val2.value;
if(isNaN(val)){
alert("请输入数字");
return;
}else{
if(val300){
alert("数字不能超过总长度300");
return
}
box1.style.width=val+'px';
}
}
/script
/body
/html
如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。