A Pen by MMux.

index.html

<div class="flowInfo">
<div class="flowLength">
  <div class="flowName proxyEndRequest">Proxy Endpoint Request</div>
</div>
<div class="flowLength">
  <div class="flowName targEndRequest">Target Endpoint Request</div>
</div>
  <div class="flowLength">
  <div class="flowName targEndResponse">Target Endpoint Response</div>
</div>
  <div class="flowLength">
  <div class="flowName proxyEndResponse">Proxy Endpoint Response</div>
</div>

</div>  

style.css

.flowInfo {
  height: 20px;
  margin: 100px auto;
  width: 70%;
}

.flowLength {

  width: 180px;
  margin: 10px;
  height: 9px;
  border: 1px solid #ddd;
  border-bottom: none;
  float: left;
}

.flowName {
  padding: 0;
  margin: -7px auto;
  border-bottom: none;
  text-align: center;
  font-size: 11px;
  color: #aaa;
  font-family: "Helvetica", sans-serif;
}

.proxyEndRequest {
  width: 126px; 
  background-color: #fff;
}

.targEndRequest {
  width: 130px;
  background-color: #fff;
}

.proxyEndResponse {
  width: 134px;
  background-color: #fff;
  
}

.targEndResponse {
  width: 140px;
  background-color: #fff;
}

Trace-Flow-Name-Indicators.markdown

Trace Flow Name Indicators

A Pen by MMux on CodePen.

License.