一、横向进度条

<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实现横向进度条和竖向进度条的更多相关文章

  1. Axure教程：滑动进度条、圆形进度环的复杂交互效果实现方法

    滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...

  2. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  3. Xamarin XAML语言教程使用属性设置进度条的当前进度

    Xamarin XAML语言教程使用属性设置进度条的当前进度 在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式:一种是 ...

  4. Android BGradualProgress 多种渐变、直角or弧角、进度条、加载条

    可实现多种渐变.直角or弧角.进度条.加载条 (Various gradient, right or arc angle, progress bar and loading bar can be re ...

  5. MFC读写.txt文件时进度条显示实时进度

    整体实现方式:先获得文件长度,然后用每次读取的长度,计算出完成的百分比,用百分比的值设置进度条. 一.MFC进度条 Progress Control 相关函数 1. create() --创建Prog ...

  6. progressbar使用方法：进度画面大小，进度画面背景，进度百分比

    前一段时间,因为项目须要研究了下progressbar,发现这个小东西还真是不简单.在这个小控件的显示效果上,花费的时间远大于预估的工作量.话说程序猿一直是这样,预估的工作量远少于实际...      ...

  7. CSS类似微软中国首页的竖向选项卡

    效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...

  8. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  9. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

随机推荐

  1. hibernate03增删改查

    <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hiber ...

  2. bypass safedog upload

    这里附上两个payload: Content-Disposition: form-data; name=”up_picture”; filename=”[回车]1.php” Content-Dispo ...

  3. 27、 jq 拖拽

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 分布式事务TransactionScope

    分布式事务TransactionScope 以下是分布式事务的所有情况的例子了,包含了事务套事务,事务套存储过程事务,经过测试,TransactionScope对于分布式事务的各种情况支持的很好. 使 ...

  5. Django1.11加载静态文件

    Django版本1.11网站通常需要js,css,images等文件,在Django中,我们把这些文件称为“静态文件”(static files).Django提供django.contrib.sta ...

  6. Linux网络 - 数据包的接收过程（转）

    https://segmentfault.com/a/1190000008836467

  7. online ddl与pt-osc详解

    Ⅰ.背景 优化sql的过程中发现表上少一个索引,直接加一个?会不会hang住?不加?sql又跑不好,由此引出一个问题--ddl操作怎么做? Ⅱ.闲扯三两句 5.6版本之前的MySQL创建索引不支持on ...

  8. Oracle11g 配置DG broker

    在配置DG broker之前需要确保Dataguard配置正常且主库和备库均使用spfile. 1. 主库配置 配置DG_BROKER_START参数 检查主库dg_broker_start设置 SQ ...

  9. git的简单玩法

    本篇笔记参考廖雪峰的git教程,为方便查看将命令部分提取并记录下来. 无意对原作的版权侵犯,如需要学习请到廖雪峰网站学习git 创建git仓库 # mkdir learngit && ...

  10. Java-idea-安装配置优化等

    1.属性配置 使用版本,winzip解压版,开发工具安装目录下idea.properties文件,自定义配置路径 # idea.config.path=${user.home}/.IntelliJId ...