使用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中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 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 mssql 时间格式问题
2009/01/13 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
js实现简单数字变动效果
2017/11/06 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
高中军训感想800字
2014/02/23 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书