CODEWITHSUNDEEP
css
JonRed
JonRed

Reputation: 2971

How to create progress steps in CSS

I have a list of items that I want to turn into a progress steps in CSS.

ol {
  width: 800px;
}
li {
  display: inline-block;
  color: transparent;
  height: 25px;
  width: 25px;
  background-color: #abc;
  border-radius: 50%;
  border: 2px solid #08f;
  margin-right: 150px;
}

li:last-child {
  margin-right: 0;
}

li:not(:last-child)::before {
  content: "";
  border: 2px solid #08f;
  margin-left:25px;
  width: 153px;
  display: inline-block;
}
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
  <li>Step 4</li>
</ol>

What I ideally want to do is:

I'm just trying to teach myself some more advanced CSS, and I've seen this pattern used somewhere else - but I've been trying for an hour or so to get there with no joy.

This is a learning exercise for me, so would love some explanation with the answer if you have the time.

Thanks,

Upvotes: 0

Views: 344

Answers (1)

Henrique Erzinger
Henrique Erzinger

Reputation: 1147

body {
    display:     grid;
    place-items: center;
    margin:      0;
    padding:     36px;
}

ol {
    display: flex;
    width:   80%;
    padding: 12px 0;
}

li {
    position:    relative;
    padding:     0;
    flex-grow:   1;
    height:      2px;
    background:  #08f;
    display:     flex;
    align-items: center;
}

li:last-child {
    margin-right: 0;
    flex-grow:    0;
}

li::after {
    content:       "";
    position:      absolute;
    left:          0;
    display:       inline-block;
    color:         transparent;
    height:        24px;
    width:         24px;
    background:    #abc;
    border-radius: 50%;
    border:        2px solid #08f;
}

span {
    position:  absolute;
    top:       -36px;
    left:      12px;
    width:     max-content;
    transform: translateX(-50%);
    z-index:   1;
}
<ol>
  <li><span>Step 1</span></li>
  <li><span>Step 2</span></li>
  <li><span>Step 3</span></li>
  <li><span>Step 4</span></li>
</ol>

In my code the nodes are the pseudo elements, and I use the flex-grow property so that the rules (that are the li tags) are properly distributed. font-size: 0 hides the text and removes it from the content-size of the elements as well.

---- edit:

I removed the font-size: 0 and added span tags for the labels and the css to position it.

Upvotes: 1

Related Questions