CSS实现进度条和订单进度条的示例


Posted in HTML / CSS onNovember 05, 2020

最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯。

简单地效果图如下:

CSS实现进度条和订单进度条的示例

CSS实现进度条:

html结构:

<div id="progress">
    <span>70%</span>
</div>

css样式:

#progress{
    width: 50%; 
    height: 30px;
    border:1px solid #ccc;
    border-radius: 15px;
    margin: 50px 0 0 100px;
    overflow: hidden;
    box-shadow: 0 0 5px 0px #ddd inset;
}

#progress span {
    display: inline-block;
    width: 70%;
    height: 100%;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
    background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: 60px 30px;
    text-align: center;
    color:#fff;
}

对于进度条,其中的进度颜色也可以是纯色,若想要用渐变的话,可以到此网站:http://www.colorzilla.com/gradient-editor/ ,这样完成渐变效果就变得非常简单,跟用PS的操作是一样一样的。将背景设置为渐变后,还需要设置background-size,这样才能实现重复效果:

CSS实现进度条和订单进度条的示例

css实现订单进度条:

html结构:

<div id="progressBar">
     <!-- 进度条 -->
     <div>
         <span></span>
     </div>
     <!-- 五个圆 -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

css样式:

#progressBar{
    width: 80%;
    height: 50px;
    position: relative;
    margin: 50px 0 0 100px;
}
#progressBar div{
    width: 100%;
    height: 10px;
    position: absolute;
    top:50%;
    left: 0;
    margin-top:-20px;
    border:1px solid #ddd;
    background: #ccc;
}
#progressBar div span{
    position: absolute;
    display: inline-block;
    background: green;
    height: 10px;
    width: 25%;
}
#progressBar>span{
    position: absolute;
    top:0;
    margin-top: -10px;
    width: 40px;
    height: 40px;
    border:2px solid #ddd;
    border-radius: 50%;
    background: green;
    margin-left: -20px;
    color:#fff;
}
#progressBar>span:nth-child(1){
    left: 0%;
}
#progressBar>span:nth-child(2){
    left: 25%;
    background:green;
}
#progressBar>span:nth-child(3){
    left: 50%;
    background:#ccc;
}
#progressBar>span:nth-child(4){
    left: 75%;
    background:#ccc;
}
#progressBar>span:nth-child(5){
    left: 100%;
    background:#ccc;
}

然后用JS就能实现动态的进度条啦!

PS:CSS样式没怎么优化,然后调试CSS代码时发现第一个圆的样式不起作用,所以才将默认背景色改成绿色,希望能帮我解决这个小BUG的博友留言一下哟,谢谢 !!!

原文链接:https://www.cnblogs.com/jr1993/p/4598630.html

以上就是CSS实现进度条和订单进度条的示例的详细内容,更多关于css实现进度条的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
You might like
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
外贸实习生自荐信范文
2013/11/24 职场文书
高三政治教学反思
2014/02/06 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书