.steps{ display: flex; align-items: center; height: 10px;  flex: 1; padding: 0 30px; overflow: hidden;}
.steps .step{ flex: 0 1 100%; height: 10px; z-index: 10; }
.steps .step:before{content: ''; position: absolute; display: block; height: 1px; top: 0; bottom: 0;
    right:100%;left: calc(-50% + 5px);
    margin: auto;    z-index: 20;  transition: all .6s ease; }
.steps .step:after{content: ''; position: absolute; display: block; border-radius: 50%; height: 8px; width:8px;  border: 1px solid #e6e5e5;
    top: 0; bottom: 0; right: 0; left: 0; margin: auto; z-index: 30; background: #fff; transition: all 0.4s ease 0s;}
.steps .step.active:after{ border: 1px solid #5E8F01;  transition: all 0.4s ease 0.3s;}
.steps .step.active:before{ background: #5E8F01;  right:50%;}
.steps .step:first-child:before{ min-width: 200px; right: 50%; left: auto}
.steps .step:last-child:before{min-width: 200px}