css 竖行进度图_css实现横向与竖向进度条效果的方法

1、横向进度条的实现代码

横向进度条

.loadbar

{

width:200px;

height:25px;

background-color:#fff;

border:1px solid #ccc;

}

.bar

{

line-height:25px;

height:100%;

display:block;

font-family:arial;

font-size:12px;

background-color:#bb9319;

color:#fff;

}

30%

效果如下：

二、竖向进度条的实现代码

竖向进度条

.loadbar

{

width:25px;

height:200px;

background-color:#fff;

border:1px solid #ccc;

position:relative;

}

.bar

{

width:100%;

display:block;

font-family:arial;

font-size:12px;

background-color:#bb9319;

color:#fff;

position:absolute;

bottom:0;

}

30%

实现结果：

推荐教程：CSS入门基础教程