BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Status Indicator

Overview

The concept of the status indicator is the same as the progress bar. In this UI scenario a status indicator is displayedon a page to communicate to the user where they are in process flow that does not have an immediate result and could be days or weeks between events. This pattern is a static pattern meant for display purposes.

A status indicator displays progress through off-line events by breaking it up into multiple meaningful or logical steps. They guide a user through a number of steps that happen behind the scenes to completion. A good status indicator should communicate the following :

  • • What steps (or tasks) the needs completion 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

Examples

 

Submitted
Processing
Processed
Submitted
Processing
Processed
Submitted
Pending
Processed
Submitted
Pending
Processed
  • Download Associated Fontawesome files: Zip


Hide Show CSS
                        
.ml-status-bar {
      
	  width:100%;
	  padding: 20px 0px 20px 0px;
	  
}
.ml-status-bar-elements {
	
    width:450px; 
	height:50px;
    display: flex;
	align-items:flex-end;
	justify-content:center;
}

.ml-status-connector{
	z-index:99;
	width:83px;
	height:10px;
	background-color:#d9d9d6;
	margin:8px -1px;
}


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

.ml-status-circle {
	position:relative;
	z-index:100;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	padding: 2px;
	background: #d9d9d6;
	font-size:22px;
	text-align: center;
	display: inline-block;
}
.none{
	line-height: 1;
	
}
.proccessing {
	/*border:4px solid #007ABC;*/
	background: #007ABC;
	color: #ffffff;
}
.proccessed {
	/*border:4px solid #A4CE4E;*/
	background: #A4CE4E;
	color: #ffffff;
}
.ml-status-circle.proccessed{
	
	/*border:4px solid #A4CE4E;
	background: #618023;*/
	background:radial-gradient(#333333 5%, #333333 49%, #A4CE4E 50%);
}
.error {
	/*border:4px solid #DB1818;*/
	background: #DB1818;
	color: #ffffff;
}

.none::before{
	content:"\00A0";
}

.proccessing.fa::before{
	content:"\f138";
}
.proccessed.fa::before{
	content:"\f058";
	
}
.error.fa::before{
	content:"\f06a";
}


.ml-status-circle > h6{
	position:relative;
	/*top:-40px;
	left:-80%;*/
	
	top:-40px;
	left:-80%;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	color:#333333;
	font-size:13px;
	font-weight:normal;
	
}

.ml-status-circle > h6.current{
	font-weight:bold;
	}



        
        
                            
HideShow HTML
                                                
  

<!-- EXAMPLE 1 -->
<div class="ml-status-bar">

<div class="ml-status-bar-elements">
<span class="ml-status-circle proccessed fa"><h6 class="current">Submitted</h6></span>
<span class="ml-status-connector proccessed"></span><span class="ml-status-connector"></span>
<span class="ml-status-circle none"><h6>Processing</h6></span>
<span class="ml-status-connector"></span><span class="ml-status-connector"></span>
<span class="ml-status-circle none"><h6>Processed</h6></span>
</div>


</div>

<!-- EXAMPLE 2 -->
<div class="ml-status-bar">

<div class="ml-status-bar-elements">
<span class="ml-status-circle proccessed fa"><h6>Submitted</h6></span>
<span class="ml-status-connector proccessed"></span><span class="ml-status-connector proccessed"></span>
<span class="ml-status-circle proccessing fa"><h6 class="current">Processing</h6></span>
<span class="ml-status-connector proccessing"></span><span class="ml-status-connector"></span>
<span class="ml-status-circle none"><h6>Processed</h6></span>
</div>


</div>

<!-- EXAMPLE 3 -->
<div class="ml-status-bar">

<div class="ml-status-bar-elements">
<span class="ml-status-circle proccessed fa"><h6>Submitted</h6></span>
<span class="ml-status-connector proccessed"></span><span class="ml-status-connector proccessed"></span>
<span class="ml-status-circle error fa"><h6 class="current">Pending</h6></span>
<span class="ml-status-connector error"></span><span class="ml-status-connector"></span>
<span class="ml-status-circle none"><h6>Processed</h6></span>
</div>


</div>

<!-- EXAMPLE 4 -->
<div class="ml-status-bar">

<div class="ml-status-bar-elements">
<span class="ml-status-circle proccessed fa"><h6>Submitted</h6></span>
<span class="ml-status-connector proccessed"></span><span class="ml-status-connector proccessed"></span>
<span class="ml-status-circle proccessed fa"><h6>Pending</h6></span>
<span class="ml-status-connector proccessed"></span><span class="ml-status-connector proccessed"></span>
<span class="ml-status-circle proccessed fa"><h6 class="current">Processed</h6></span>
</div>


</div>

Indicator Components

Status Icons

   - Not visited step

   - Completed step

   - Step in progress

   - Alert, action required

Status Connector


                

Examples

Sample desktop view only. Not to scale.

Status Indicator on a Page

overlay


Status Indicator on a Card

overlay