Status & Progress

Statuses

Example	Class Name	Code
Active	`.adb-status__active`	<span class="adb-status adb-status__active"> <span class="adb-status--gem"></span> Active </span>
Pending	`.adb-status__pending`	<span class="adb-status adb-status__pending"> <span class="adb-status--gem"></span> Pending </span>
Failed	`.adb-status__error`	<span class="adb-status adb-status__error"> <span class="adb-status--gem"></span> Failed </span>
Canceled	`.adb-status__disabled`	<span class="adb-status adb-status__disabled"> <span class="adb-status--gem"></span> Canceled </span>

Abbreviated

If there is not enough space for the status word label, include it as a tooltip on the status gem.

<span class="adb-status adb-status__error">
  <span class="adb-status--gem" data-toggle="tooltip" title="Failed"></span>
</span>
<span class="adb-status adb-status__pending">
  <span class="adb-status--gem" data-toggle="tooltip" title="Pending"></span>
</span>
<span class="adb-status adb-status__active">
  <span class="adb-status--gem" data-toggle="tooltip" title="Success"></span>
</span>
<span class="adb-status adb-status__disabled">
  <span class="adb-status--gem" data-toggle="tooltip" title="Disabled"></span>
</span>

Completion

Shows the status of a task.

<span class="adb-status adb-status__success">
  <i class="adb-icon__check_circle"></i>
</span>
<span class="adb-status adb-status__success">
  <i class="adb-icon__check"></i>
</span>
<span class="adb-status adb-status__neutral">
  <i class="adb-icon__error"></i>
</span>
<span class="adb-status adb-status__error">
  <i class="adb-icon__stop"></i>
</span>

Informative Status Icons with Tooltip on Hover

Displays further details on hover. Works in combination with other Tooltip options.

Notice the opacity change on the System Information Icons on hover.

<i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="03/10/2015"></i>

Loading Icons

<button class="adb-button__large" disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>
<button disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>
<button class="adb-button__small" disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>

Colors

Example	Class Name	Code
Loading ...	`.adb-loading`	<span class="adb-loading"> <span class="adb-loading--text">Loading ...</span> </span>
Loading ...	`.adb-loading__light`	<span class="adb-loading adb-loading__light"> <span class="adb-loading--text">Loading ...</span> </span>

See Buttons for loading states in buttons.

Progress and Usage Meters

Progress and Usage Meters display a status based on the level of completion. They are used for counting the number of users assigned to an app or show the status of an application before it has been published.

Use Loading Icons or Loading Buttons or Uploading Icons as indeterminate indicators.

Attribute		Description
`data-percent`		Format is "<#>", where # is a number between 0 and 100.
`data-state`	Optional	Possible values include empty, low, full and error.

Sizes

Example Class Code

Example	Class	Code
65%	`.adb-js-meter.adb-meter`	<div class="adb-js-meter adb-meter" data-percent="65" data-toggle="tooltip" title="65%"> <span class="adb-meter--percent"> 65% </span> </div>
65%	`.adb-meter__small`	<div class="adb-js-meter adb-meter adb-meter__small" data-percent="65" data-toggle="tooltip" title="65%"> <span class="adb-meter--percent"> 65% </span> </div>

65%

.adb-js-meter.adb-meter

<div class="adb-js-meter adb-meter" data-percent="65" data-toggle="tooltip" title="65%">
  <span class="adb-meter--percent">
    65%
  </span>
</div>

65%

.adb-meter__small

<div class="adb-js-meter adb-meter adb-meter__small" data-percent="65" data-toggle="tooltip" title="65%">
  <span class="adb-meter--percent">
    65%
  </span>
</div>

States

<div class="adb-js-meter adb-meter adb-meter" data-percent="0" data-state="empty" data-toggle="tooltip" title="0%">
  <span class="adb-meter--percent">
    0%
  </span>
</div>

10%

<div class="adb-js-meter adb-meter" data-percent="10" data-state="low" data-toggle="tooltip" title="Low">
  <span class="adb-meter--percent">
    10%
  </span>
</div>

50%

<div class="adb-js-meter adb-meter" data-percent="50" data-state="loading" data-toggle="tooltip" title="Pending">
  <span class="adb-meter--percent">50%</span>
</div>

100%

<div class="adb-js-meter adb-meter" data-percent="100" data-state="full" data-toggle="tooltip" title="Full">
  <span class="adb-meter--percent">
    100%
  </span>
</div>

100%

<div class="adb-js-meter adb-meter" data-percent="100" data-state="completed" data-toggle="tooltip" title="Unlimited">
  <span class="adb-meter--percent">
    100%
  </span>
</div>

100%

<div class="adb-js-meter adb-meter" data-percent="100" data-state="full_capacity" data-toggle="tooltip" title="Unlimited">
  <span class="adb-meter--percent">
    100%
  </span>
</div>

<div class="adb-js-meter adb-meter" data-percent="0" data-state="error" data-toggle="tooltip" title="You need to add more users">
  <span class="adb-meter--percent">
    0%
  </span>
</div>

Star Ratings

<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>

<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>

Caption

4/5 based on 3 reviews

<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>
<div class="adb-caption">
  4/5 based on 3 reviews
</div>

Sizes

<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
</div>

<div class="adb-rating adb-rating__large">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
</div>