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

前端  /  管理员 发布于 7年前   354

有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现

一、横向进度条

<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>

 

到此这篇关于css 横向进度条和竖向进度条实现代码的文章就介绍到这了,更多相关css 横向进度条和竖向进度条内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！


  • 上一条：
    VSCode搭建React Native环境
    下一条：
    CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客