gottaboy / progress-tracker

A progress tracker written in SASS with flexbox to be flexible and responsive out of the box.

SASS Progress Tracker

Live demo

A progress tracker written in SASS with flexbox to be flexible and responsive out of the box. This can be used to illustrate a multi stage process e.g. form, quiz or a timeline.

##Installation

###npm

$ npm install progress-tracker --save

###bower

$ bower install progress-tracker --save

##Usage Once you have downloaded the code, run the commands below to view the demo.

$ npm install
$ gulp serve

You can also just import progress-tracker.scss into your own project and modify as needed. Optional files are progress-tracker-animations.scss to add animations and progress-tracker-theme.scss for quicker theming.

Follow the code example below for basic usage, each demo sets the first two steps as complete, the third step as active and the last two steps as inactive. For additional styles add a modifier classes to the ul and add additional markup as needed in the examples.

<ul class="progress-tracker">
  <li class="progress-step is-complete">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step is-complete">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step is-active">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
</ul>

License

MIT © Nigel O Toole