进度条效果如下:

CSS部分


body {
background-color: white;
}

.progress-bar {
display: flex;
flex-direction: row;
}

.item {
display: flex;
width: 1%;
flex-grow: 1;
padding-top: 20px;
justify-content: center;
position: relative;
padding-top: 20px;
}

.item:first-child,
.item:last-child {
width: auto;
flex-grow: 0;
flex-shrink: 0;
}

.item > .cycle {
z-index: 2;
position: absolute;
top: 5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}

.item.active > .cycle {
top: 1px;
margin-left: -9px;
width: 18px;
height: 18px;
}

.item:before, .item:after {
z-index: 1;
content: "";
width: 50%;
height: 6px;
position: absolute;
top: 7px;
background-color: red;
}

.item:before {
left: 0;
}

.item:after {
left: 50%;
}

.item:first-child:before,
.item:last-child:after {
display: none;
}

.item.active:after,
.item.active ~ .item:before,
.item.active ~ .item.after,
.item.active ~ .item > .cycle {
background-color: #999;
}

HTML部分


<div class="progress-bar">
<div class="item">
<div class="cycle"></div>
<div class="text">提交</div>
</div>
<div class="item">
<div class="cycle"></div>
<div class="text">人力审核</div>
</div>
<div class="item">
<div class="cycle"></div>
<div class="text">审核完成发放</div>
</div>
<div class="active item">
<div class="cycle"></div>
<div class="text">审核完成发放</div>
</div>
</div>

纯CSS打造进度条的更多相关文章

  1. CSS实现进度条和订单进度条

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

  2. 纯CSS打造银色MacBook Air(完整版)

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  3. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  4. Css静态进度条

    图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...

  5. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  6. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

  8. 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  9. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

随机推荐

  1. Thrift-java学习小结

    ➠更多技术干货请戳:听云博客 Thrift是什么?什么情况下使用thrift Thrift源于大名鼎鼎的facebook之手,在2007年facebook提交Apache基金会将Thrift作为一个开 ...

  2. idea之internal java compiler error

    启动错误:Error:java: Compilation failed: internal java compiler error 解决:将圈选地方改为对应的jdk版本即可

  3. 好用的內存鏡像工具Belkasoft RAM Capture

    来自俄罗斯的取证大厂Belkasoft,旗下的主力产品Belkasoft Evidence Center有不错的评价,除了BEC之外,咱们Yuri老兄也是佛心来着的,提供了一个免费内存镜像工具RamC ...

  4. s2sh框架搭建(辅助工具:MyEclipse)及解决一些遇到的问题

    1.新建一个web project 2.首先生成Hibernate Facet 3.Hibernate Facet 安装步骤 4.然后是spring facet安装步骤 5.最后是struts fac ...

  5. Java Web之会话技术

    客户端与服务器通信过程中,会产生一些数据.比如,A和B分别登陆了某宝购物网站,A买了一个Android手机,B买了一个iPhone手机,当结账时,web服务器需要分别对用户A和B的信息分别保存.根据J ...

  6. UIScrollView增加刷新

    1. if (!self.scrollView) { CGRect frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.frame), CGRe ...

  7. DIV宽度自动缓慢变化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 【1】第一次电话面试---上海EMC

    时间是2016//11月,投的是上海的EMC2公司的JavaWeb开发岗,第一次接到的电话面试,问的题目很基础基础,很遗憾,本人在掌握的太不好,回答的很乱,目测定挂.下面记下HR问的问题及回答. 首先 ...

  9. 北京联想招聘-Android Framework高级工程师(7-10年) 加入qq 群:220486180 或者直接在此 留言咨询

    Job ID #: 45038 Position Title: Android Framework高级工程师 Location: CHN-Beijing Functional Area: Resear ...

  10. MySQL 索引详解大全

    什么是索引? 1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2. 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结 ...