Lead: << Your name/s >> << Select the status -
| Status | ||||
|---|---|---|---|---|
|
| Status | ||
|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
Progress bars indicators express an unspecified wait time or display the current completed ratio of a process or action.
...
Types
Type | Usage | Image |
|---|---|---|
Determinate | For operations in which the length of the process is known. Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress. |  |
Indeterminate | For operations in which the length of the process is not known. Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete. |  |
Usage & Behaviour
Progress bars 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.
General guidelines
Structure
Linear progress indicators are composed of two required elements:
...
Progress bars should be hidden by default and only appear on screen when they are active. Once complete, the progress bar should return to it's default state (removed from view) in most cases replaced by the content that was loaded.
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
Progress bars don not support user interaction, they are solely used to provide a visual status indicator.
Best practices
Don’t stop a progress bar - A progress bar 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 progress bar approaches 99% and suddenly stops. Most users will be frustrated by this behavior because it makes them think the app is frozen. There is a simple solution — you can disguise small delays in your progress bar by moving it instantly and steadily.
Explain why the user is waiting - Many times, 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 the users and encourage them to wait it out.
Accessibility compliance
A progress bar indicates that the user's request is received and is in the process of executing the task. 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 ARIA progressbar role.
Focus management
Progress bars 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 - see Screen Reader Guidelines
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/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">Radio Button <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>
|
...