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

互联网 20-5-19

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

<html> <head> <title>横向进度条</title> <style type="text/css">        .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;     } </style> </head> <body>      <div class="loadbar">       <strong class="bar" style='width:30%;'>30%</strong>     </div> </body> </html>

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

<html> <head> <title>竖向进度条</title> <style type="text/css">        .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;             } </style> </head> <body>      <div class="loadbar">       <strong class="bar" style='height:30%;'>30%</strong>     </div> </body> </html>