...
General guidelines
Structure
Progress Linear progress indicators are composed of two required elements:
Track - The track is a fixed width horizontal rule, with set boundaries for the indicator bar to travel along.
Indicator Bar - The bar animates along the length of the track.
...
The placement of a progress indicator can indicate the scope of a process. Linear progress indicators should only be placed at the top or in the center of a container or component. For example:
A linear progress indicator attached to the top a container, such as a card indicates the process applies to that particular item (and that interaction with the
...
Default State
...
rest of the UI is possible)
A linear progress indicator at the center of the screen should indicate loading all screen content (and that no interaction is possible until complete)
<< add screenshots >>
When integrated to form elements (e.g. file upload), it may be placed to the right of the label\field pair. It may also be placed underneath the field depending on available screen real estate or responsive design.
<< add screnshot >>
Default State
Determinate linear progress indicators may be hidden or shown in their empty state by default depending on how important it is to convey the prior expectation that an action a lengthy operation. As an example, an archival form operation which is expected to take minutes to complete should show the linear progress indicator in its empty state to set a priori expectations for the user.
Indeterminate linear 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.Once complete, the linear progress indicator should return to it's default state (removed from view) and in most cases replaced by the content that was loaded or post-completion message.
States
There are none of the traditional states such as hover, active, focused and error states for linear progress indicators as user interaction is not applicable.
Linear
State | Determinate | Indeterminate |
|---|---|---|
Empty |  | |
Partially complete |  |  |
Complete |  | |
Disabled | | |
Circular
State | Determinate | Indeterminate |
|---|---|---|
Empty |  | |
Partially complete |  |  |
Complete |  | |
Disabled | | |
Interaction
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.
Avoid using vertical linear indicators - A linear progress indicator is instinctively easier to visualize when oriented horizontally. Avoid orienting it vertically to reduce the cognitive load required for users.
Accessibility Compliance
...
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>
|
...