Progress bar

The progressbar shows how many steps there are and where you are located in the amount of steps displayed. The dashes & numbers are clickable to quickly jump to a certain step. If there are more than 7 steps, we use a more simple progress indicator where the lines are changed to dots.

Default

px 

			
				<div class="m-progress-bar js-progress-bar  ">
	<div class="m-progress-bar__wrapper">
		<button class="m-progress-bar__arrow m-progress-bar__arrow--left"></button>
		<div class="m-progress-bar__items">
			<a href="#" class="m-progress-bar__item is-completed  m-progress-bar__item--first ">
				<span class="m-progress-bar__number">1</span>
			</a>
			<a href="#" class="m-progress-bar__item is-completed   ">
				<span class="m-progress-bar__number">2</span>
			</a>
			<a href="#" class="m-progress-bar__item  is-active  ">
				<span class="m-progress-bar__number">3</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">4</span>
			</a>
			<a href="#" class="m-progress-bar__item    m-progress-bar__item--last">
				<span class="m-progress-bar__number">5</span>
			</a>
		</div>
		<button class="m-progress-bar__arrow m-progress-bar__arrow--right"></button>
	</div>
	<p class="m-progress-bar__text">Currently at step
		<strong class="m-progress-bar__current">3/5</strong>
	</p>
</div>

Dots

Once there are more than 7 steps used in the progress bar, the lines are automatically changed to dots. When the component reaches the sides of the screen, only 3 dots will be shown: the active, the one before and the one after. Unless the first or last one are active, it will show the one accoringly the position of the active dot.

px 

			
				<div class="m-progress-bar js-progress-bar m-progress-bar--dots js-progress-bar ">
	<div class="m-progress-bar__wrapper">
		<button class="m-progress-bar__arrow m-progress-bar__arrow--left"></button>
		<div class="m-progress-bar__items">
			<a href="#" class="m-progress-bar__item is-completed  m-progress-bar__item--first ">
				<span class="m-progress-bar__number">1</span>
			</a>
			<a href="#" class="m-progress-bar__item is-completed   ">
				<span class="m-progress-bar__number">2</span>
			</a>
			<a href="#" class="m-progress-bar__item is-completed   ">
				<span class="m-progress-bar__number">3</span>
			</a>
			<a href="#" class="m-progress-bar__item is-completed   ">
				<span class="m-progress-bar__number">4</span>
			</a>
			<a href="#" class="m-progress-bar__item is-completed   ">
				<span class="m-progress-bar__number">5</span>
			</a>
			<a href="#" class="m-progress-bar__item  is-active  ">
				<span class="m-progress-bar__number">6</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">7</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">8</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">9</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">10</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">11</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">12</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">13</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">14</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">15</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">16</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">17</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">18</span>
			</a>
			<a href="#" class="m-progress-bar__item    ">
				<span class="m-progress-bar__number">19</span>
			</a>
			<a href="#" class="m-progress-bar__item    m-progress-bar__item--last">
				<span class="m-progress-bar__number">20</span>
			</a>
		</div>
		<button class="m-progress-bar__arrow m-progress-bar__arrow--right"></button>
	</div>
	<p class="m-progress-bar__text">Currently at step
		<strong class="m-progress-bar__current">6/20</strong>
	</p>
</div>

Documentation

Modifiers

  • m-progress-bar--dots

    Modifier applied to the progress bar when there are more than 7 steps displayed. It turns the default lines into dots with a number displayed.

  • m-progress-bar--compact

    Modifier applied to the progress bar to make it more compact in the height.

  • m-progress-bar__arrow--left

    Indicate the arrow, which is displayed on mobile, to go to the previous step.

  • m-progress-bar__arrow--right

    Indicate the arrow, which is displayed on mobile, to go to the next step.

  • m-progress-bar__item--first

    Indicate in the list of item that the element is the first one to apply the correct styling.

  • m-progress-bar__item--last

    Indicate in the list of item that the element is the last one to apply the correct styling.

States

  • is-active

    Indicate the step that is currently active. This styling will change the background color to make the active state more visible compared to the other steps.

  • is-completed

    Indicate which step or steps are already completed in the progress. This will change the background color compared to its dormant and active state.