使用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的一个简单导航栏实现
Aug 03 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python深入学习之内存管理
2014/08/31 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python实现定时发送qq消息
2019/01/18 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
QA工程师岗位职责
2013/11/20 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
鉴史问廉观后感
2015/06/10 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书