Lead: << Your name/s >> << Select the status - Status colour Yellow title ongoing Status colour Grey title Waiting Status colour Blue title Done Status colour Green title published
>>Status colour Red title on hold
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
Progress bars express an unspecified wait time or display the current completed ratio of a process or action.
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>
...
| Type | Usage | Image |
|---|---|---|
<< Link to the relevant page >> 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.<< Link to the relevant page >> |
|
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 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
...
<< In case of a complex component duplicate this section, describing each sub-component separately >>
Structure
Linear progress indicators are composed of two required elements:
...
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
<<for example, how to change a value – type, arrows, use slider>>
<<use Click target to describe the interaction>>
Validations and errors
<<used for specific components e.g. slider>>
Transitions
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
<<e.g. Slider should display a label its on>>
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>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 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role.
Focus management
Progress bars a purely visual indicator that contains no user interaction and therefore cannot be focused on.
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
...
| Zeplin link | Screen thumbnail | <<Short Zeplin link. You |
|---|---|---|
| <<Screen with 200 width>> |
|
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: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><a href="www.verint.com" class="text-link text-link-sm">Advanced</a></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"><a href="www.verint.com" class="text-link text-link-sm" disabled>Advanced</a></script></code></pre>
</div>
</div>
</form>
</div>
</div>
|
...