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入門基礎教程

總結

以上是生活随笔為你收集整理的css 竖行进度图_css实现横向与竖向进度条效果的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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