Skip to content

Instantly share code, notes, and snippets.

@code-vagabond
Created September 18, 2018 16:46
Show Gist options
  • Save code-vagabond/241487f39373fb8dd1506e93383af9a7 to your computer and use it in GitHub Desktop.
Save code-vagabond/241487f39373fb8dd1506e93383af9a7 to your computer and use it in GitHub Desktop.
<div class="d-flex justify-content-center">
<div class="progress-bullets" style="width: 22.5rem;">
<div class="progress-outer">
<div class="line"></div>
<div class="steps d-flex flex-row justify-content-between align-items-center">
<div class="step">
<div class="circle"></div>
<div>Qualifikation</div>
</div>
<div class="step">
<div class="circle"></div>
<div>Review 1</div>
</div>
<div class="step">
<div class="circle"></div>
<div>Finale</div>
</div>
<div class="step">
<div class="circle"></div>
<div>Review 2</div>
</div>
<div class="step">
<div class="circle"></div>
<div>Ergebnisse</div>
</div>
</div>
</div>
<div class="progress-inner">
<div class="line">
<div class="line-fill" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; background-color: rgb(148, 40, 123);"></div>
</div>
<div class="steps d-flex flex-row justify-content-between align-items-center">
<div class="step">
<div class="circle is-reached">
<mat-icon svgIcon="done" class="timeline-icon"></mat-icon>
</div>
</div>
<div class="step">
<div class="circle is-ahead">
<mat-icon svgIcon="done" class="timeline-icon"></mat-icon>
<span></span>
</div>
</div>
<div class="step">
<div class="circle is-ahead">
<mat-icon svgIcon="done" class="timeline-icon"></mat-icon>
</div>
</div>
<div class="step">
<div class="circle is-ahead">
<mat-icon svgIcon="done" class="timeline-icon"></mat-icon>
</div>
</div>
<div class="step">
<div class="circle is-ahead">
<mat-icon svgIcon="done" class="timeline-icon"></mat-icon>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment