Just add .progress-indicator to any ul or ol. Add bubbles by embedding a <span class="bubble"> in your <li>. See below for an example:
<ul class="progress-indicator">
<li class="completed">
<span class="bubble"></span>
Step 1.
</li>
<li class="completed">
<span class="bubble"></span>
Step 2.
</li>
<li class="completed">
<span class="bubble"></span>
Step 3.
</li>
<li class="completed">
<span class="bubble"></span>
Step 4.
</li>
<li>
<span class="bubble"></span>
Step 5.
</li>
</ul>
Toss in some Font Awesome icons to mix things up.
If you want to stack things up, you can use it for all kinds of things, like timelines. Just add .stacked to the container.
Note: in order to keep text looking good, add the <span class="stacked-text">Text Label</span> to all of your text blocks in each node, which can be styled however you like.
To disable centering and margins that auto-center the timeline, just add .nocenter To the ul/ol. Note: depending on your icons and text, you may want to massage the alignment for your content.