一、横向进度条

<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. ubuntu下搭建LAMP环境

    本文参考:http://www.linuxdiyf.com/linux/21265.html 请支持原创. 步骤一:安装apache root@mrwang:~$ sudo apt install a ...

  2. php(数组方法

    什么是数组? 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组长度 ...

  3. #define 宏定义

    gcc Semaphores.c -lpthread --std=c99 1. 边际效应 2. \ 宏定义中一行写不下时,不能换行,必须\+换行 #define CPE_MAIN_PRINTF(fmt ...

  4. 使用LibreOffice修复受损的Office文档

    在工作中时常遇到Office文档损坏,用MS Office不能打开,有时候用LibreOffice(测试为4.2版本)可以打开,另存一下就好了. 此方法虽然不是100%管用,但在实际中大半都可以. 另 ...

  5. TZOJ　3134: 渊子赛马修改版

    描述 赛马是一古老的游戏,早在公元前四世纪的中国,处在诸侯割据的状态,历史上称为“战国时期”.在魏国作官的孙膑,因为受到同僚庞涓的迫害,被齐国使臣救出后,到达齐国国都. 赛马是当时最受齐国贵族欢迎的娱 ...

  6. ffmpeg命令的使用

    参考博客:https://www.cnblogs.com/wainiwann/p/4128154.html 但是红色网页总结的 “ffmpeg 用法” 非常全面. http://www.360doc. ...

  7. springboot2.0集成shiro出现ShiroDialect报错找不到AbstractTextChildModifierAttrPr

    @Bean public ShiroDialect shiroDialect() { return new ShiroDialect(); } 报错出现找不到org/thymeleaf/process ...

  8. SpringMVC整合mybatis基于纯注解配置

    Mybatis整合Spring配置 第一部分:配置Spring框架 配置SpringMVC的步骤 配置流程图 导入包(哪些包,基本包5个,1日志依赖包,2webmvc支持包)SpringMVC配置 & ...

  9. 商务通服务器版LR_Data目录下相关配置文件

    SiteSetting.config 这个文件保存权限角色(超级管理员,管理员等)角色权限.弹窗图片.客服的自动应答等内容. operatorsql8.config SQLite 数据库文件,保存登录 ...

  10. IO流的总结(一)

    IO流的介绍: 其实在我们现实生活中有很多流,例如:水流,电流,气流  等等都是是流,但在Java中IO流是指对数据的操作的流. 按照流的分类: 1:字节流和字符流 Reader和InputStrea ...