css 横向进度条和竖向进度条实现代码

有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用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;
    }


 
    
      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 横向进度条和竖向进度条内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！