← back to Butlr

views/partials/wizard-progress.ejs

10 lines

<nav class="wizard-progress" aria-label="Wizard progress">
  <ol>
    <li class="<%= step >= 1 ? 'done' : '' %><%= step === 1 ? ' current' : '' %>"><span class="wp-num">1</span> Category</li>
    <li class="<%= step >= 2 ? 'done' : '' %><%= step === 2 ? ' current' : '' %>"><span class="wp-num">2</span> Business</li>
    <li class="<%= step >= 3 ? 'done' : '' %><%= step === 3 ? ' current' : '' %>"><span class="wp-num">3</span> What &amp; account</li>
    <li class="<%= step >= 4 ? 'done' : '' %><%= step === 4 ? ' current' : '' %>"><span class="wp-num">4</span> Callback</li>
  </ol>
  <div class="wizard-progress-bar"><div class="wizard-progress-fill" style="width: <%= ((step-1)/3)*100 %>%"></div></div>
</nav>