CODEWITHSUNDEEP
reactjscssflexboxresponsive
Rafael Rocha
Rafael Rocha

Reputation: 518

Vertical Progress Steps with CSS

I have react components printing an itinerary from a train and I need to unify the circles with a vertical line like this:

enter image description here

I need to unify those nodes (circles with a vertical bar) and was looking for an idea. I'm using flex and the items are being rendered using a react component that includes 3 subcomponents (one with the time, one with the node - circle and one with the Station and real time).

I have to write the css from scratch (using maximum flexbox or grid).

Thank you in advance.

Upvotes: 5

Views: 22884

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123418

My attempt.

I would go with an unordered list where time and description are children of flexbox list-items. Dot and vertical line can be easily drawn using pseudoelements (properly stacked).

.events li { 
  display: flex; 
  color: #999;
}

.events time { 
  position: relative;
  padding: 0 1.5em;  }

.events time::after { 
   content: "";
   position: absolute;
   z-index: 2;
   right: 0;
   top: 0;
   transform: translateX(50%);
   border-radius: 50%;
   background: #fff;
   border: 1px #ccc solid;
   width: .8em;
   height: .8em;
}


.events span {
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
}

.events span::before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 0;
   height: 100%;
   border-left: 1px #ccc solid;
}

.events strong {
   display: block;
   font-weight: bolder;
}

.events { margin: 1em; width: 50%; }
.events, 
.events *::before, 
.events *::after { box-sizing: border-box; font-family: arial; }
<ul class="events">
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
    
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time and other text that may span over 2 lines</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
</ul>

Upvotes: 24

OK sure
OK sure

Reputation: 2656

You could use a border on a wrapper like so:

.timeline-wrapper {
  margin-left: 1.5rem;
  border-left: 3px solid #ddd;
}
.node {
  padding-left: .5rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.node h3, .node p {
  margin: 0;
}
.node::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: .3rem;
  left: -.5rem;
}
<div class="timeline-wrapper">
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
</div>

Upvotes: 2

Rohith Murali
Rohith Murali

Reputation: 5669

The circles can be drawn using divs with border radius and then two circular divs and be seperated by another div with side border color highlighted.

Upvotes: 1

Related Questions