Progress Bar

A progress bar displays steps in equal width and highlights the active one. Similar to the tabs component, it becomes horizontally scrollable on smaller viewports (width < 768px), and tries to center the active item. Reload the page on smaller viewports to see it in action.

  • Select an artist
  • Upload images
  • Add artwork metadata
  • Add to shows
  • Select an artist
  • Upload images
  • Add artwork metadata
  • Add to shows
  • Select an artist
  • Upload images
  • Add artwork metadata
  • Add to shows
  • Select an artist
  • Upload images
  • Add artwork metadata
  • Add to shows
.row
  .col-md-12
    .progress-bar-wrap
      .progress-bar-overflow-indicator-left
      .progress-bar
        %ul.progress-bar-overflow
          %li.progress-bar-item.is-active
            %span Select an artist
          %li.progress-bar-item
            %span Upload images
          %li.progress-bar-item
            %span Add artwork metadata
          %li.progress-bar-item
            %span Add to shows
      .progress-bar-overflow-indicator-right