Progress Bar

The progress bar component is used to visually represent the completion of a task or operation.

Code
Guidelines

Base

This shows how much of the task has been completed and how much is still left.

<div class="c-progress c-progress-primary">
    <div class="c-progress-meter" style="width: 10%"></div>
</div>

HTML

Color Examples

<div class="c-progress c-progress-primary">
    <div class="c-progress-meter" style="width: 10%"></div>
</div>
<div class="c-progress c-progress-success">
    <div class="c-progress-meter" style="width: 80%"></div>
</div>

HTML

Size Examples

<div class="c-progress c-progress-sm c-progress-primary">
    <div class="c-progress-meter" style="width: 20%"></div>
</div>
<div class="c-progress c-progress-primary">
    <div class="c-progress-meter" style="width: 60%"></div>
</div>
<div class="c-progress c-progress-lg c-progress-primary">
    <div class="c-progress-meter" style="width: 80%"></div>
</div>

HTML

Additional Styles

With Text

25%

55%

<div class="c-progress c-progress-primary">
	<span class="c-progress-meter" style="width: 25%">
    <p class="c-progress-meter-text">25%</p>
  </span>
</div>
<div class="c-progress c-progress-lg c-progress-primary">
	<span class="c-progress-meter" style="width: 55%">
    <p class="c-progress-meter-text">55%</p>
  </span>
</div>

HTML

Animated

<div class="c-progress c-progress-primary">
	<div class="c-progress-meter-animated" style="width: 10%"></div>
</div>
<div class="c-progress c-progress-success">
	<div class="c-progress-meter-animated" style="width: 50%"></div>
</div>

HTML

Users must be permissioned to IHS Markit GitLab in order to view angular components. Gain access here

Design Guidelines coming soon…