Indicators

INDICATORS

Loading Indicators

Spinner (tasks that are a few seconds long)
Font Awesome Icons

Small
Regular (2x)
Large (3x)

HTML Markup:

<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>
<i class="fa fa-refresh fa-spin  fa-2x" aria-hidden="true"></i>
<i class="fa fa-refresh fa-spin  fa-3x" aria-hidden="true"></i>

React Code:

<FontAwesome name="refresh" spin />
<FontAwesome size="2x" name="refresh" spin />
<FontAwesome size="3x" name="refresh" spin />

Progress Bar (tasks that are greater than a few seconds long)
Bootstrap Documentation
React Bootstrap Documentation

<ProgressBar ... />

Status Indicators

Pill

<span class="pill dark">99</span>

Lozenges

Success

Danger

Inform

<span class="lozenge success">Success</span>
<span class="lozenge danger">Danger</span>
<span class="lozenge inform">Inform</span>

PicabooDesign System

INDICATORS

Loading Indicators

Status Indicators

Picaboo
Design System