进度条效果如下:

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. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  2. [LeetCode] Number of Boomerangs 回旋镖的数量

    Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...

  3. 关于使用iframe嵌套页面的跳转方式

    一.背景A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,在D中跳转页面的写法区别如下. 二.JS跳转window.location.href.locatio ...

  4. 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏

    问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...

  5. Spring源码分析——BeanFactory体系之接口详细分析

    Spring的BeanFactory的继承体系堪称经典.这是众所周知的!作为Java程序员,不能错过! 前面的博文分析了Spring的Resource资源类Resouce.今天开始分析Spring的I ...

  6. js 的match方法

    怎么调用? 字符串对象.match( 目标串 ); 返回值? 如果存在,就返回这个字符串: 否则, 返回null 实例 举一个常用的例子,判断图片路径是否包含某个字符串.

  7. 【65测试20161114】【字符串】【DP】

    第一题 复制&粘贴: 文件的内容是一个字符串S,对其进行N次复制&粘贴的操作,第i次操作复制位置Ai和位置Bi之间的所有文字,然后在位置Ci粘贴.这里位置x表示字符串的第x个字符的后面 ...

  8. em 和 px相互转换

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

  9. Mininet在创建拓扑的过程中为什么不打印信息了——了解Mininet的log系统

    前言 写这篇博客是为了给我的愚蠢和浪费的6个小时买单! 过程原因分析 我用Mininet创建过不少拓扑了,这次创建的拓扑非常简单,如下图,创建拓扑的代码见github.在以前的拓扑创建过程中,我都是用 ...

  10. JavaScript的apply和call方法及其区别

    参考资料: http://blog.csdn.net/myhahaxiao/article/details/6952321 apply和call能“劫持”其他对象的方法来执行,其形参如下: apply ...