Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
CSS / Navigation and Menus

Multi-step Indicator

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

Multi-step Indicator - CodeCanyon Item for Sale


Ad: Bluehost hosting
This Multi-step Indicator is an implementation of the Progress Bar Design Pattern, also known as “Progress Indicator”, “Multi-step Progress Bar”, “Wizard Steps”, “Progress Train”, and “Steps Left”. The latest version (4.0) is based on “Flexbox”, which rules out Internet Explorers older than 10. If you need to support “old IE” you must import the latest AND previous “modern” CSS files with conditional comments. The Multi-step Indicator now gracefully handles more than five steps, and a couple of extra classes can also be used to better handle edge cases. No JavaScript is used! Lastly, a “wizard” is included, that can be used to interactively choose the colors that you like and have the Sass variables or the generated CSS file built for you.


  • Modern, Flexbox implementation
  • Inherently Responsive
  • Built with Sass, uses color variables
  • A “wizard” is provided, to help color selection and compile the necessary CSS file
  • Older versions are compatible with ”old IE” (< 10)
  • The latest version does not use any images, layered PSD files are provided with the older versions


Version 4 (21 Feb 2015)

  • Re-visited the code, now using Flexbox and Sass
  • Color selection “wizard”

Version 3 (19 Apr 2013)

  • Modern styles are now responsive, using CSS media queries

Version 2 (30 Oct 2012)

  • New style with 5 colors
  • Updated documentation

Version 1.2 (5 July 2012)

  • New color variation
  • Small tweaks on color 2
  • Updated PSD file

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


3 July 12

Last Update:
9 March 15

Compatible Browsers:
IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Files Included:
HTML, CSS, Layered PSD

Software Version:


eCommerce, All Items, breadcrumbs, multi-step progress bar, progress indicator, responsive, steps left