This is the style of the step type progress bar used in registration forms, online shopping sites, etc.
npm i teb-step-bar
For details see ./demo/index.html
<!-- Example where title is above number, detail is under number -->
<ul class="step-bar">
<li class="step">
<span class="step__title">Cart</span>
<p class="step__text">Comfirm Items</p>
</li>
<li class="step is-active">
<span class="step__title">Log in</span>
<p class="step__text">Identification</p>
</li>
<li class="step">
<span class="step__title">Payment</span>
</li>
<li class="step">
<span class="step__title">Purchase</span>
</li>
<li class="step">
<span class="step__title">Complete</span>
<p class="step__text">Thank you!</p>
</li>
</ul>
// In your custom.scss
// 1. Overwrite variables in _variables.scss
$num-background-active-color: #a1e600;
$num-border-active-color: #a1e600;
// 2. Import step-bar.scss
@import './scss/step-bar';
By overriding the _variables.scss variable and customizing it, it is also possible to change the paint or border.