Step progress bar

Step progress bar is used when you want to visualize the steps of an operation that needs to take place like a shopping order, configuration or stages of a wizard.


Following is a horizontal step progress bar.

It resizes based on the width of the view.


Vertical step progress bar is usually used to show the order of events in time or even the steps of a process.

Take a look at how it looks:


There are 2 parts to using step progress bar. Html markup and also the javascript api to interact with the step progress bar.


You need to create an unordered list with the class .cdt-step-progressbar. Then within each li you need to add 3 items. first, the indicator which in the case of examples above is the circle with the number in it. Then you can add a span with the class .title and optionally, in the case of a vertical step progress bar, a div with the class .content if you need to add more information for that step (e.g a text and/or links).

To make the progress bar horizontal, you need to add .horizontal to your ul.
  <ul class="cdt-step-progressbar">
    <span class="indicator">1</span>
    <span class="title">Initiate</span>
    <span class="indicator">2</span>
    <span class="title">Buy item 1</span>
    <span class="indicator">3</span>
    <span class="title">Finally make it</span>
    <span class="indicator">4</span>
    <span class="title">In production</span>
    <span class="indicator">5</span>
    <span class="title">Delivery</span>

Javascript API

For the step progress bar to work properly you need to initialize it in your javascript code as follow:

const myStepProgressBar = new Kodhus.StepProgressBar();
  myStepProgressBar.init({ selector: '.cdt-step-progressbar', activeIndex: 0 });

There are 2 keys you can pass to the init function. defaultColor which is the color of your step progress bar when not active (default is code #999), and also activeIndex which is the step that should be active (default is 0).

Thus, if you want to use the defaults, you just need to pass the selector {selector: '.cdt-step-progressbar'}.


You can set the active step by following call:


Note: the number you pass to activeIndex starts from 0. 0 means the first step.