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>

效果如下：

转载于:https://www.cnblogs.com/gdjlc/p/10030526.html

css实现横向进度条和竖向进度条相关推荐

html列表横向变纵向,手机版利用 CSS 将横向表格转换成竖向列表显示
假如一个表格有很多列,那么在手机版显示时,就不是很好查看(因为表格太宽),换一种思路,看看下面的效果: 完全不用改动 HTML,纯 CSS 即可实现,代码如下: .gridView { width:2 ...
css 竖行进度图_css实现横向与竖向进度条效果的方法
1.横向进度条的实现代码横向进度条 .loadbar { width:200px; height:25px; background-color:#fff; border:1px solid #ccc ...
安卓控件之竖向进度条
Android控件篇将ProgressBar翻转90度(竖向进度条) 需求此前跟着老师遇到过一个电量管理软件,ui给出的切图要求主页有一个类似电池的显示电量的控件,如下图: 普通进度条的xml: ...
css锥形渐变结合SVG实现环形进度条
css锥形渐变结合SVG实现环形进度条准备: 锥形渐变 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gra ...
Java文件下载，HTML进度条实时刷新进度
效果展示实现原理 1:后台同步进程开始下载文件 2:前台使用遮罩效果,使页面不能点击,使用circliful进度条插件(插件源码见后) 3:页面使用JavaScript定时器发送ajax请求刷新进度 ...
进度条(报名,活动进度条)
话不多说上效果图 (根据比例算出进度) Ps : 代码乱差,能手写出来不错了 //目前兼容移动端<div class="yyds">//提示当前已>已预约多少人& ...
基于腾讯 x5 开源库，提高 webView 开发效率，大概要节约你百分之六十的时间成本。该案例支持处理 js 的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常 error 状态、支持视频播放
YCWebView 项目地址:yangchong211/YCWebView 简介: 基于腾讯 x5 开源库,提高 webView 开发效率,大概要节约你百分之六十的时间成本.该案例支持处理 js 的交 ...
Java渐变进度条_Android ProgressBar自定义图片进度，自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
Xamarin XAML语言教程使用属性设置进度条的当前进度
Xamarin XAML语言教程使用属性设置进度条的当前进度在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式:一种是 ...

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

css实现横向进度条和竖向进度条相关推荐

最新文章

热门文章