使用CSS3制作一个简单的进度条(demo)


Posted in HTML / CSS onMay 23, 2017

这里只是一个小demo,一个用CSS3写的进度条。

如图所示:

使用CSS3制作一个简单的进度条(demo)

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"   />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
    width:100px;
    display:inline-block;
    *zoom:1;
}
.pb-wrapper
{
    border:1px solid #cfd0d2;
    position:relative;
    background:#cfd0d2;
    border-radius: 8px;
}
.pb-container
{
    height:12px;
    position:relative;
    left:-1px;
    margin-right:-2px;
    font:1px/0 arial;
    padding:1px;
}
.pb-highlight
{
    position:absolute;
    left:0;
    top:0;
    _top:1px;
    width:100%;
    opacity:0.6;
    filter:alpha(opacity=60);
    height:6px;
    background:white;
    font-size:1px;
    line-height:0;
    z-index:1
}
.pb-text
{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
    font:10px/12px arial;
    color:black;
    font:10px/12px arial
}
</style>
</head>
<body>
    <div class="process-bar skin-green">
        <div class="pb-wrapper">
            <div class="pb-highlight"></div>
            <div class="pb-container">
                <div class="pb-text">50%</div>
                <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

以上所述是小编给大家介绍的使用CSS3制作一个简单的进度条(demo),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 #HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
总结30个CSS3选择器
Apr 13 #HTML / CSS
You might like
php+mysql实现无限分类实例详解
2015/01/15 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js 小数取整的函数
2010/05/10 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
原生JS实现留言板
2020/03/26 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python中几个比较常见的名词解释
2015/07/04 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
春节活动策划方案
2014/01/24 职场文书
应届生求职信
2014/05/31 职场文书
协议书范文
2015/01/27 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
比赛主持人开场白
2015/05/29 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL