Html 具有活动步骤和线条的多步骤窗体

我正在制作一个多步骤的表单。我不确定如何在球体下方创建线，也不确定如何执行步骤/活动/传递方面来更改关键线。我需要接近这个设计的东西

这是我最新的JSFIDLE

我当前的代码

html

因此，重构当前看起来可能是这样的

。表单步骤{
溢出：隐藏；
文本对齐：居中；
}
.李表格{
浮动：左；
右边距：10px；
}
.形成步骤li span{
背景：红色；
边界半径：100%；
宽度：50px；
高度：50px；
显示：块；
字体大小：25px；
线高：50px；
}

步骤1
步骤2
步骤3
步骤4

试试下面的代码片段

。向导进程{
列表样式：无；
列表样式图像：无；
填充：0；
空白：nowrap；
}
.李先生{
浮动：左；
文本对齐：居中；
位置：相对位置；
}
.向导进度.步骤名称{
显示：表格单元格；
高度：32px；
垂直对齐：底部对齐；
文本对齐：居中；
宽度：100%；
}
.向导进度.步骤编号{
字体大小：14px；
字体大小：粗体；
边框：3倍立体暗光；
背景色：暗灰色；
边界半径：50%；
宽度：24px；
显示：内联块；
边缘顶部：10px；
颜色：#fff；
}
.向导进度。步骤编号：之后{
内容：“；
显示：块；
背景：暗射线；
高度：1px；
宽度：130%；
/*130像素*/
位置：绝对位置；
底部：45px；
}
.wizard progress li:类型的最后一个。步骤编号：之后{
显示：无；
}
.step done.step num:：after{
背景色：#000；
}
.向导进度.步骤完成.步骤编号，
.向导进度.步骤处于活动状态.步骤数{
边框颜色：#000；
背景色：#000；
}
.向导进度。步骤处于活动状态。步骤名称{
字体大小：粗体；
}
/*向导包含5个步骤*/
.wizard-5步骤{
宽度：750px；
}
.wizard-5-steps li{
保证金权利：6.9%；
/*6.6687%；50px*/
宽度：13%；
}
.wizard-5-步骤。步骤编号：之后{
左：62%；
}
/*向导包含6个步骤*/
.向导-6-步骤{
宽度：750px；
}
.wizard-6-steps li{
浮动：左；
保证金权利：5.5%；
/*6.6687%；50px*/
宽度：11%；
}
.wizard-6-步骤。步骤编号：之后{
左：64%；
}

1.
程序


2.
约会


3.
时间


4.
接触


5.
回顾

试试下面的代码片段

。向导进程{
列表样式：无；
列表样式图像：无；
填充：0；
空白：nowrap；
}
.李先生{
浮动：左；
文本对齐：居中；
位置：相对位置；
}
.向导进度.步骤名称{
显示：表格单元格；
高度：32px；
垂直对齐：底部对齐；
文本对齐：居中；
宽度：100%；
}
.向导进度.步骤编号{
字体大小：14px；
字体大小：粗体；
边框：3倍立体暗光；
背景色：暗灰色；
边界半径：50%；
宽度：24px；
显示：内联块；
边缘顶部：10px；
颜色：#fff；
}
.向导进度。步骤编号：之后{
内容：“；
显示：块；
背景：暗射线；
高度：1px；
宽度：130%；
/*130像素*/
位置：绝对位置；
底部：45px；
}
.wizard progress li:类型的最后一个。步骤编号：之后{
显示：无；
}
.step done.step num:：after{
背景色：#000；
}
.向导进度.步骤完成.步骤编号，
.向导进度.步骤处于活动状态.步骤数{
边框颜色：#000；
背景色：#000；
}
.向导进度。步骤处于活动状态。步骤名称{
字体大小：粗体；
}
/*向导包含5个步骤*/
.wizard-5步骤{
宽度：750px；
}
.wizard-5-steps li{
保证金权利：6.9%；
/*6.6687%；50px*/
宽度：13%；
}
.wizard-5-步骤。步骤编号：之后{
左：62%；
}
/*向导包含6个步骤*/
.向导-6-步骤{
宽度：750px；
}
.wizard-6-steps li{
浮动：左；
保证金权利：5.5%；
/*6.6687%；50px*/
宽度：11%；
}
.wizard-6-步骤。步骤编号：之后{
左：64%；
}

1.
程序


2.
约会


3.
时间


4.
接触


5.
回顾

使用JavaScript和jQuery的多步骤表单

//jQuery时间
var当前值、下一个值、上一个值//字段集
变量左，不透明度，比例//我们将设置动画的字段集属性
var动画//防止快速多点单击故障的标志
$（“.next”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
next_fs=$（this.parent（）.next（）；
//使用next_fs的索引在progressbar上激活下一步
$（“#progressbar li”）.eq（$（“字段集”）.index（next_fs））.addClass（“活动”）；
//显示下一个字段集
next_fs.show（）；
//使用样式隐藏当前字段集
当前动画({
不透明度：0
}, {
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将电流放大至80%
比例=1-（1-现在）*0.2；
//2.从右侧带下一个_fs（50%）
左=（现在是*50）+“%”；
//3.当下一个_fs移入时，将其不透明度增加到1
不透明度=1-现在；
当前_fs.css({
“转换”：“缩放（“+scale+”），
“位置”：“绝对”
});
next_fs.css({
"左":左,，
“不透明度”：不透明度
});
},
持续时间：800，
完成：函数（）{
当前_fs.hide（）；
动画=假；
},
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.previous”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
previous_fs=$（this.parent（）.prev（）；
//取消激活当前步进程序
<ul className="form-steps">
  <li className={page === 1 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 1</li>
  <li className={page === 2 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 2</li>
  <li className={page === 3 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 3</li>
  <li className={page === 4 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 4</li>
</ul>

.form-steps{
    overflow:hidden;
    text-align: center;

    li{
        float:left;
        margin-right: 10px;

        span{
            background: red;
            border-radius: 100%;
            width: 50px;
            height: 50px;
            display: block;
            font-size: 25px;
            line-height: 50px;
        }
    }
}