...
Progress indicators express an unspecified wait time or display the current completed ratio of a process or action.<< image needed >>
...
Types
Linear & Circular
LUX offers two visually distinct variations of progress indicators: linear and circular progress indicators. Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the application.
Type | Usage | Image |
|---|---|---|
Linear progress indicators display are often referred to as a Progress bar. They visualize a process by visualizing displaying an indicator increasing in width from 0 to 100% of a track. This is animated in sync with the process’s progress. The behaviour of the indicator is dependent on whether the progress of a process is known. Determinate indicators are for operations in which the length of the process is known. Determinate linear indicators display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress. Indeterminate indicators are for operations in which the length of the process is not known. Indeterminate linear indicators display the indicator 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 progress indicators display are often referred to as a Progress spinner. They visualize a progress by animating an indicator along a circular track in a clockwise direction. The behaviour of the indicator is dependent on whether the progress of a process is known. Determinate indicators are for operations in which the length of the process is known. Determinate circular indicators fill the invisible, circular track with colour, as the indicator moves from 0 to 360 degrees. Indeterminate indicators are for operations in which the length of the process is not known. Indeterminate circular indicators continuously animate along the invisible circular track until the process is complete. They can be applied directly to a surface, such as a button or card. |
|
...
Progress indicators inform users about the status of ongoing processes, such as loading a page, submitting a form, or saving updates. They communicate an applications state and indicate available actions, such as whether users can navigate away from the current screen.
A linear indicator can also be integrated into form elements, such as file uploads, to express a connection between a background ongoing process and individual items. They are ideal for long determinate activities (over 10 seconds).
A circular indicator can be integrated into a button or actionable icon to express a connection between an interaction and a specific item. They are typically used to express when an interaction, such as clicking a button again, is not available. They should be used for short, indeterminate activities (between 2-5 seconds).
General guidelines
Structure
Progress indicators are composed of two required elements:
Track - The track is a fixed width rule, with set boundaries for the indicator bar to travel along.
Indicator Bar - The bar animates along the length of the track.
Placement and Positioning
The placement of a progress indicator can indicate the scope of a process and the type of indicator being used.
Default State
Generally, progress indicators should be hidden by default and only appear on screen when they are active. Exceptions to this guideline are detailed within specific types of indicator.
...
Progress indicators do not support user interaction, they are solely used to provide a visual status indicator. They exception to this is where circular progress indicators are integrated into a button with a built in cancel operation.
...
Best practices
Don’t stop a progress indicator - A progress indicator makes users develop an expectation for how fast the action is being processed. As a result, any unexpected freezes will be noticed and will impact user satisfaction. The worst possible case is when a progress indicator approaches 99% and suddenly stops. Most users will be frustrated by this behaviour because it makes them think the app is frozen. You can disguise small delays in your progress indicator by moving it instantly and steadily.
Explain why the user is waiting - If users are informed, they may be more patient. It can be helpful to add additional clarity by including text that tells the user what is happening or explains why the user is waiting.
Provide a general time estimate for time-consuming tasks - Don’t try to be exact, a simple, “this might take five minutes” can be enough for users and encourage them to wait it out.
Make sure that long operations offer the ability to cancel during the process.
Accessibility
...
<< Add new link >>
...
Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Content authors should provide values of aria-valuemin, aria-valuemax and aria-valuenow where the aria-valuemax is known. Further guidelines for optimum compliance can be found at <<resolve link>> ARIA progressbar role.
...
Progress indicators are a purely visual indicator that contains no user interaction and therefore cannot be focused on.
Screen reader support
Following the recommendations provided above for ARIA support will also provide the necessary tools for screen reader support. Users are notified about the existence of a progressbar on the page when they encounter the ARIA progressbar role. Make sure the corresponding content areas also supports screen readers for content and behaviour.
Design
Zeplin link | Screen thumbnail |
|---|---|
https://zpl.io/2pn8Jla <<update when available >> |  |
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/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">
<style>
.progress, .progress-bar {
top: 0;
left: 0;
z-index: 22222;
width: 100%;
height: 4px;
}
.intermediate-progress-bar {
display: none;
top: 0;
left: 0;
z-index: 22222;
width: 100%;
height: 4px;
}
.intermediate-progress-bar-animation {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
background-color: #007aff;
transition: width 0.6s ease;
width: 20%;
animation: mymove 1s infinite;
}
.intermediate-progress-bar.animate {
display: flex;
}
@keyframes mymove {
from {
margin-left: 0%;
}
to {
margin-left: 100%;
}
}
</style>
<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" style="width: 0%" 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" style="width: 0%" 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(currentVal+"%");
$(".progress .progress-bar").attr("aria-valuenow", currentVal);
currentVal += 1;
if (currentVal <= 100) {
simulateProgress();
}
}, 100)
}
simulateProgress();
</script>
</form>
</div>
</div>
|