body{margin:8px auto;min-width:320px}ul.progress-bar{font-size:0;list-style:none;margin:0;padding:0;width:100%}li.section{color:gray;display:inline-block;font-size:13px;font-weight:700;line-height:16px;overflow:hidden;padding-top:45px;position:relative;text-align:center;text-overflow:ellipsis;vertical-align:top}li.section:before{background:gray;border:2px solid #fff;border-radius:17px;color:#fff;content:"x";height:30px;left:calc(50% - 15px);line-height:30px;position:absolute;top:2px;width:30px;z-index:1}.status-bar{background:gray;height:2px;margin:0 auto;position:relative;top:20px}.current-status{background:#3cb371;border-radius:1px;height:2px;width:0}@keyframes changeBackground{0%{background:gray}to{background:#3cb371}}li.section.visited:before{animation:changeBackground .5s linear;animation-fill-mode:forwards;content:"\2714"}li.section.visited.current:before{box-shadow:0 0 0 2px #3cb371}