...
Only one type should represent each kind of activity in an application. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere.
Type | Usage | Image |
|---|---|---|
Linear | Linear progress indicators are often referred to as a Progress bar. Determinate indicators are for operations where the duration of the process is known. The indicator increases in width from 0 to 100% of the track, in sync with the process’s progress. Indeterminate indicators are for operations where the duration of the process is not known. The indicator is continuously animated along the track until the process is complete. They can be applied to the entire page, large containers, and to form elements. |
|
Circular | Circular progress indicators are often referred to as a Progress spinner. Determinate indicators are for operations where the length of the process is known. They fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees. Indeterminate indicators are for operations where the duration of the process is not known. They continuously animate along the invisible circular track until the process is complete. They can be applied directly to an element, such as a button or card. |
|
Usage & Behavior
Progress indicators inform users about the status of ongoing processes, such as loading a page, submitting a form, or saving updates. They communicate an application's state and indicate available actions, such as whether users can navigate away from the current screen.
...
Linear progress indicators should only be placed at the top or in the center of a container or component. For example:
|  |
|  |
When integrated to form elements (such as file upload), it may be placed to the right of the field it relates to. It may also be placed underneath the field depending on available space or responsive design. |  |
A circular progress indicator can be placed:
| 
|
Default State
Determinate linear progress indicators may be hidden or shown in their empty state by default. When shown, they can indicate that an action may be a lengthy operation. For example, a form submission which is expected to take several minutes to complete should show the linear progress indicator in its empty state to set the user’s expectations.
Indeterminate linear progress indicators should be hidden by default and only appear once active. On completion, the linear progress indicator should be hidden again, and in most cases replaced by the content that was loaded or a post-completion message.
Circular progress indicators should be hidden by default and only appear once active. On completion, the circular progress indicator should be hidden again, and in most cases replaced by the content that was loaded. In the case of integration with a component such as a button, the component is returned to its default state.
...
Common states such as hover, active, focused and errordo not apply to progress indicators, as user interaction is not possible.
Linear
State | Determinate | Indeterminate |
|---|---|---|
Empty |  | |
Partially complete |  |  |
Complete |  | NA |
Disabled | | |
Circular
State | Determinate | Indeterminate |
|---|---|---|
Empty |  | |
Partially complete |  |  |
Complete |  | NA |
Disabled | | |
Interaction
Progress indicators do not support user interaction. They are solely used to provide a visual status indicator. The exception to this is where circular progress indicators are integrated into a button with a built-in cancel operation.
...
Progress indicator placement and positioning is fixed, relative to their parent container, regardless of screen width or height.
Linear progress indicators are fixed height and optional their width can be either fixed or dynamic width. Max width may will not exceed its parent container width in order to prevent unessessary scroll bars.
Circular progress indicators are are fixed height and width in one of 3 available sizes (S, M, L). Original sizing should be maintained unless it exceeds the size of its parent container. The next size bellow below should be displayed in that scenario.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Linear Progress Indicator <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Determinate</label>
<div class="col-lg-4">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Indeterminate</label>
<div class="col-lg-4">
<div class="intermediate-progress-bar animate">
<div class="intermediate-progress-bar-animation" role="progressbar" aria-valuenow="intermediate" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="intermediate-progress-bar animate">
<div class="intermediate-progress-bar-animation" role="progressbar" aria-valuenow="intermediate" aria-valuemin="0" aria-valuemax="100"></div>
</div></script></code></pre>
</div>
</div>
<script>
var currentVal = 0;
function simulateProgress() {
setTimeout(function() {
$(".progress .progress-bar").width(100 - currentVal+"%");
$(".progress .progress-bar").attr("aria-valuenow", currentVal);
currentVal += 1;
if (currentVal <= 100) {
simulateProgress();
}
}, 200)
}
simulateProgress();
</script>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Circular Progress Indicator</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Determinate</label>
<div class="col-lg-4">
<div class="spinner" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="spinner" role="status">
<span class="sr-only">Loading...</span>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Indeterminate</label>
<div class="col-lg-4">
<div class="indeterminate-spinner" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="indeterminate-spinner" role="status">
<span class="sr-only">Loading...</span>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div> |
...