一、横向进度条

<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. maven如何单独启动插件目标

    说来恼火,在网上找了半天没找到 原来插件名称其实不需要定义而是直接想象到的,如下,我尝试过了好几种 mvn plugin:goal 都没成功:从代码看goal已经没啥疑问了,就是compile,但哪个 ...

  2. Christmas Spruce

    Consider a rooted tree. A rooted tree has one special vertex called the root. All edges are directed ...

  3. SetWindowPos 和Z序

    参考文档:http://www.cnblogs.com/findumars/p/3948315.html SetWindowPos(hWnd: HWND; {窗口句柄}hWndInsertAfter: ...

  4. CString比较不区分大小写

    第一种:都变为大写 或者都变成小写. str1.MakeUpper();str2.MakeUpper();or:str1.MakeLower();str2.MakeLower(); if(str1== ...

  5. 剑指offer——python【第56题】删除链表中的重复节点

    题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...

  6. Web开发——HTML基础（HTML表单/下拉列表/多行输入）

    参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...

  7. AsyncHttpClient使用

    github地址:AsyncHttpClient, API:API 1.X和2.X差别很大,我用的1.X中的最新版 1.9.39. 这是一个异步请求的工具,越简单越好,不喜欢再结合netty使用.As ...

  8. (转)git 忽略规则

    对于经常使用Git的朋友来说,.gitignore配置一定不会陌生.废话不说多了,接下来就来说说这个.gitignore的使用. 首先要强调一点,这个文件的完整文件名就是".gitignor ...

  9. Number 强制类型转换 int 强制转换整型 float 强制转换浮点型 complex 强制转换成复数 bool 强制转换成布尔类型,结果只有两种,要么True 要么 False """bool 可以转换所有的数据类型 everything"""

    # ###Number 强制类型转换 var1 = 5 var2 = 4.85 var3 = True var3_2 = False var4 = 3+9j var5 = "888777&q ...

  10. centos7中安装、配置jdk（转载）

    参考命令:http://www.jb51.net/os/RedHat/73016.html来进行安装 安装说明 系统环境:centos7安装方式:rpm安装软件:jdk-8u25-linux-x64. ...