I was looking for a simple code for a step by step process indicator. I found a few things, but everyone seems to have forgotten about IE8… I need to support this old browser at work. So I did my own that I’m sharing here:
- File Uploaded
- →
- File Reviewed
- →
- File Approved
And the code:
1 2 3 4 5 6 7 | <ul class="steps"> <li class="step complete">File Uploaded</li> <li class="arrow">→</li> <li class="step current">File Reviewed</li> <li class="arrow">→</li> <li class="step">File Approved</li></ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <style>body { counter-reset:steps}ul.steps { margin:0; padding:0;}ul.steps li.step { background: none repeat scroll 0 0 lightgray; border-radius: 1em; color: white; display: inline-block; font-size: 14px; height: 4em; line-height: 4em; margin: 0 1em; position: relative; text-align: center; width: 9em;}ul.steps li.step:before { content: counter(steps, decimal) ". "; counter-increment: steps;}ul.steps li.step.complete:before { content: "<img draggable="false" role="img" class="emoji" alt="" src="https://s.w.org/images/core/emoji/15.0.3/svg/2714.svg"> ";}ul.steps li.step.complete { background-color: green;}ul.steps li.step.current { background-color:dodgerblue}ul.steps li.arrow { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: black; display: inline-block; font-size: 28px; height: 46px; line-height: normal; margin: 0; width: auto;}</style> |
