一、横向进度条

<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. QT上位机

    程序是用QT写的,通过COM口进行数据的读取. 源码地址:https://github.com/kunkunlin/QT-SWJ

  2. java学习之路--StringBuffer常见的功能和实例

    ---恢复内容开始--- 储存 StringBuffer append();将指定数据作为参数添加到已有数据尾处 StringBuffer insert(index,数据):可以将数据插到指定的ind ...

  3. mac iterm 提示符序列调整

    mac终端提示符显示绝对路径太长了,能不能提示符不显示全路径呢?自定义提示符前缀呢? mac终端命令换行覆盖问题也顺带解决. 编辑~/.bash_profile export PS1='' 参数: 序 ...

  4. elementUI中table组件会出现空白部分

    先上图: 造成原因: width全部都写死了,(注释:不要全部都写死width,没写width的会自动分配宽度)  

  5. JavaScript---设计模式总结

    写了两篇设计模式的东西后,感觉不是很完美,决定闭关修炼,同时写下笔记 重申:设计模式很有用! 这里列一个设计模式的目录防止漏了某个东西(未完成的没有链接) 单例模式 策略模式 代理模式 迭代器模式 发 ...

  6. Caused by: java.lang.ClassNotFoundException: Could not load requested class :XXX.XXX.XXX 异常处理

    在ssh整合中:出现的异常 Exception sending context initialized event to listener instance of class org.springfr ...

  7. 树莓派3 之 pi3Robot 控制系统配置

    需求 个人正在用Python写一个控制系统,技术选型是python3 + Flask + Mysql + Bootstrap.需要将这套系统直接部署到树莓派中. 代码地址:https://github ...

  8. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  9. java框架之SpringMVC(2)-补充及拦截器

    高级参数绑定 package com.zze.springmvc.web.controller; import org.springframework.stereotype.Controller; i ...

  10. python框架之Django(7)-Cookie&Session使用

    Cookie 添加 response.set_cookie 添加明文cookie response.set_cookie(key, value='', max_age=None, expires=No ...