BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Progress Indicator

Overview

A progress bar displays progress through a sequence by breaking it up into multiple meaningful or logical numbered steps. They guide a user through a number of steps to complete a specified task. A good progress tracker should inform users about the following aspects:

  • · What steps (or tasks) the users need complete with a proper visual queue
  • · Current step the user is on - queue user's active location within the process
  • · How many steps remain with clear designation

When designing complex forms, it is UX best practice to break those forms up into meaningful chunks of information. This is done with a progress bar.

Best Practices:

  • • The progress indicator pattern can be used in a modal when circumstances warrant it, but in most cases should be used within a full page template.
  • • Try to keep flow to maximum of seven steps.
  • • Try to reduce the amount of input user is asked to perform in each step by chunking content logically.
  • • When you are able to pre-fill the majority of fields, use “display text” style with an “Update” link instead of showing all fields in input boxes by default. This will reduce the amount of vertical space the content takes up.

Functional Example

Functional details:

  • • Be default, step 1 is expanded and all other steps are collapsed and not accessible.
  • • Upon proceeding to next steps, the previous step collapses and active step expands. Previous steps become accessible to the user once they move past it, incase they need to return to the step to make changes.
  • • A confirmation page is never part of the progress indicator; it is a full page template that appears after user completes the last step in the process.
  • • When the user needs to perform a side task from within the flow included within the progress indicator, use the flip or a drawer pattern for the side task.
1

About Your Claim


Benefits for Using a Participating, Network Dentist

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent est enim, gravida eu ligula nec, condimentum fermentum velit.











2

About You







3

About Your Absence

Nam dui erat, auctor a, dignissim quis.

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


Hide Show CSS
                        
.ml-step-container{
	width:100%;
	padding:30px;
}

hr.ml-step-hr{
	border-top: 1px solid #A7A8AA;
	border-bottom:0px;
	margin:10px 20px 0px 20px ;
	
}

.ml-step-header.expanded > hr.ml-step-hr{
	display:none;
}

.ml-step-header{
	height:60px;
	padding: 20px 15px 20px 15px ;
	margin:0;
	background:url(/assets/patterns/img/step-border-BG.png) repeat-y 0 0;
	/*border-left:8px solid #D9D9D6;*/
}

.ml-step-header-elements{
	
	display:flex;
}

.ml-step-header-elements > h3{
	
	padding: 0px 5px 0px 5px ;
	text-align: left;
	color:#333333;
	font-weight:normal;
	font-size:16px;
	text-decoration:none;
	margin-top:-2px;
	
	
}
/* ====== expanded ======*/

.expanded{
   background:url(/assets/patterns/img/step-border-BG-active.png) repeat-y 0 0;
   /*border-left:8px solid #007ABC;*/
}
.ml-step-header.expanded > .ml-step-header-elements > h3{
	color:#007ABC;
	text-decoration:none !important;
	font-weight:bold;
	
}
/* ====== completed ======*/

.completed{
	background:url(/assets/patterns/img/step-border-BG-complete.png) repeat-y 0 0 !important;;
	/*border-left:8px solid #A4CE4E !important;*/
}
.ml-step-header.completed > .ml-step-header-elements > h3{
	cursor:pointer;
	color:#007ABC;
	text-decoration:underline;
}


.ml-step-content {
	/*border-left:8px solid #007ABC;*/
	background:#ffffff url(/assets/patterns/img/step-border-BG-active.png) repeat-y 0 0;
	padding: 0px 15px 0px 15px;
}
.ml-step-content-div{
	padding: 5px 20px 25px 20px;
}

.ml-step-container .ml-step-content:last-child{
	background:none;
}

.ml-step-container .ml-step-header:first-child {
	
  background:url(/assets/patterns/img/step-border-BG.png) no-repeat 0 15px ;
  
  background-size: 8px 100% !important;
}

.ml-step-container .ml-step-header.completed:first-child {
  background:url(/assets/patterns/img/step-border-BG-complete.png) no-repeat 0 15px !important;
  background-size: 8px 100% !important;
}

.ml-step-container .ml-step-header.expanded:first-child {
  background:url(/assets/patterns/img/step-border-BG-active.png) no-repeat 0 15px ;
  background-size: 8px 100% !important;
}


/*.ml-step-container .ml-step-header:last-child {
  background:url(/assets/patterns/img/step-border-BG.png) no-repeat 0 0 !important;
  background-size: 8px 50% !important;
	
}*/


.last-child{
 background:url(/assets/patterns/img/step-border-BG.png) no-repeat 0 0 !important;
 background-size: 8px 50% !important;
	
}

.last-child.completed{
 background:url(/assets/patterns/img/step-border-BG-complete.png) no-repeat 0 0 !important;
 background-size: 8px 50% !important;
	
}

.last-child.expanded{
 background:url(/assets/patterns/img/step-border-BG-active.png) no-repeat 0 0 !important ;
 background-size: 8px 50% !important;
	
}


/* ======== Step Style ====== */

.ml-step-numbers {
	
	margin-left:-26px;
	margin-right:10px;
	margin-top:-8px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding:5px;
    background: #d9d9d6;
    font-size: 18px;
	font-weight:bold;
    color: #5E5E5E;
    text-align: center;
	display:inline-block;
   
}

.ml-current-step {
	background: #007ABC;
	color: #ffffff;
}

.ml-completed-step {
	padding:2px;
	border:4px solid #A4CE4E;
	background:#FFFFFF ;
	color: #72991E;
}

.ml-completed-step::after {
	
	content:"\f00c";
}
        
        
                            
HideShow HTML
                                                

<!-- Vertical Steps -->

<div id="accordion1" class="ml-step-container">

<!-- STEP 1 -->

<div class="ml-step-header completed">
<div class="ml-step-header-elements"> <span class="ml-step-numbers ml-completed-step fa"></span>
<h3>About Your Claim</h3>
</div>
<hr class="ml-step-hr">
</div>
<div class="ml-step-content completed" id="step1">
<div class="ml-step-content-div">
<div><strong>Benefits for Using a Participating, Network Dentist</strong></div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est enim, gravida eu ligula nec, condimentum fermentum velit. Quisque molestie, dui et mollis tincidunt, mauris orci mattis risus, a ullamcorper diam orci at augue. Donec porta nunc libero, sed dignissim diam vestibulum fringilla. Curabitur tempor tempor turpis, eget tempor massa tempus a. Praesent in dignissim enim, eget accumsan nisl. Phasellus efficitur leo ut elit aliquet, quis egestas velit feugiat. Sed pulvinar velit lectus, vitae mattis erat sollicitudin bibendum. Donec ut tortor viverra, eleifend velit at, lobortis arcu. Mauris vel tempor mi, et lacinia nunc. Morbi bibendum ipsum nec sapien scelerisque venenatis. </p>
</div>
<hr class="ml-step-hr">
</div>

<!-- STEP 2 -->
<div class="ml-step-header expanded" id="step2">
<div class="ml-step-header-elements"> <span class="ml-step-numbers ml-current-step">2</span>
<h3>About You</h3>
</div>
<hr class="ml-step-hr">
</div>
<div class="ml-step-content">
<div class="ml-step-content-div"> <img src="/assets/img/patterns/form-1.png" width="398" height="469" alt=""/> <br>
<br>
<br>
<br>
<img src="/assets/img/patterns/form-buttons-1.png" alt="" width="395" height="41"/> </div>
<hr class="ml-step-hr">
</div>

<!-- STEP 3 -->
<div class="ml-step-header last-child" id="step3">
<div class="ml-step-header-elements"> <span class="ml-step-numbers">3</span>
<h3>About Your Absence</h3>
</div>
</div>
<div class="ml-step-content">
<div class="ml-step-content-div"> Nam dui erat, auctor a, dignissim quis. </div>
</div>
</div>

<!-- ======== script ======== -->
<script>
$(document).ready(function() {

$('.ml-step-content').hide();
$('.expanded').nextUntil('.ml-step-header').slideToggle();


});

$('#Next-st1').click(function (e) {

$('#step1').removeClass("expanded");
$('#step1').find('.ml-step-numbers').empty();
$('#step1').find('.ml-step-numbers').removeClass('ml-current-step');
$('#step1').addClass("completed").nextUntil('.ml-step-header').slideToggle();
$('#step1').find('.ml-step-numbers').addClass('ml-completed-step fa');
$('#step1').next('.ml-step-content').addClass('completed');

$('#step2').addClass("expanded").nextUntil('.ml-step-header').slideToggle();
$('#step2').find('.ml-step-numbers').addClass("ml-current-step");


});

$('#Next-st2').click(function (e) {


$('#step2').removeClass("expanded");
$('#step2').find('.ml-step-numbers').empty();
$('#step2').find('.ml-step-numbers').removeClass('ml-current-step');
$('#step2').addClass("completed").nextUntil('.ml-step-header').slideToggle();
$('#step2').find('.ml-step-numbers').addClass('ml-completed-step fa');
$('#step2').next('.ml-step-content').addClass('completed');

$('#step3').toggleClass("expanded").nextUntil('.ml-step-header').slideToggle();
$('#step3').find('.ml-step-numbers').toggleClass("ml-current-step");


});

$('#step1').click(function (e) {

if ($(this).hasClass('completed')) {
$(this).toggleClass("expanded").nextUntil('.ml-step-header').slideToggle();
//$(this).find('.ml-step-numbers').toggleClass('ml-current-step');
$('#step3').removeClass("expanded").nextUntil('.ml-step-header').hide();
$('#step2').removeClass("expanded").nextUntil('.ml-step-header').hide();
$('#step2').find('.ml-step-numbers').removeClass("ml-current-step");
$('#step3').find('.ml-step-numbers').removeClass("ml-current-step");
}

});
$('#step2').click(function (e) {

if ($(this).hasClass('completed')) {
$(this).toggleClass("expanded").nextUntil('.ml-step-header').slideToggle();
//$(this).find('.ml-step-numbers').toggleClass('ml-current-step');

$('#step1').removeClass("expanded").nextUntil('.ml-step-header').hide();
$('#step3').removeClass("expanded").nextUntil('.ml-step-header').hide();
$('#step1').find('.ml-step-numbers').removeClass("ml-current-step");
$('#step3').find('.ml-step-numbers').removeClass("ml-current-step");
}

});
</script>

Indicator Components

Active Step


  • • The blue bar and step number in blue circle indicates an active step in the process.
  • • When user comes to any step, it will expand and turn into an active step.
  • • Only one step can be active and expanded at any time and others will be in collapsed view.
2

About You







Completed Steps


  • • The green bar and checkmark (in place of a step number) shows a completed step.
  • • Once the progress/step indicator shows a completed step, it will stay like that even when that step is active.
  • • Headers for completed steps are hyperlinked so user can revisit those steps from anywhere in the process.

Step Heading 1


Step Heading 2

Benefits for Using a Participating, Network Dentist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est enim, gravida eu ligula nec, condimentum fermentum velit. Quisque molestie, dui et mollis tincidunt, mauris orci mattis risus, a ullamcorper diam orci at augue.

Not Visited Steps


The grey bar and step number in grey circle indicates not yet visited steps. When user starts any stepped process, the first step will always be expanded and active, and the rest will be inactive.

2

Step Heading 2

3

Step Heading 3

Nested Indicator

Caution: The nested indicator should be used minimally and only when circumstances are unavoidable. We recommend consulting the Global Brand and Marketing UX team if considering the use of the nested indicator.

The nested indicator should be used when within a progress indicator, there is a step that has multiple complex steps within it. It is not intended to be used simply to avoid a long scrolling page, but more for complex scenarios within a flow which result in some dynamic nature to the content that needs to display.

nested-stepper