...

Status

colour	Yellow
title	ongoing

...

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 indicators show that an operation is currently ongoing. They display the current completed completion ratio of a process or action.

Image Removed

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 >>

<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>an operation or a visual animation that conveys an unspecified wait time.

...

Types

There are two visually-distinct types of progress indicator: linear and circular.

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.

For operations in which the length

Type	Usage	Image

<< Link to the relevant page >>

Determinate

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.

Determinate operations display the indicator increasing For operations in which

The indicator increases in width from 0 to 100% of the track, in sync with the process’s progress.

<< Link to the relevant page >>

Indeterminate

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.

Image Added

Circular

Circular progress indicators are often referred to as a Progress spinner.

Determinate indicators are for operations where the length of the process is

not known. Indeterminate operations display the indicator continually growing and shrinking along the

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.

Image Added

Usage &

...

<< Use a visual for each sub-section >>

...

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 applications application's 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 Progress indicators are composed consist of two required elements:

...

A track. The fixed area which the indicator bar

...

travels along.

...

For circular indicators, the track is invisible.

...

The indicator bar. The animated colored area which moves along the track.

...

Placement and Positioning

The placement of a progress indicator can indicate the scope of a process. Progress bars 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 that the process applies to that particular item, and that interaction with the rest of the UI is possible.	Image Added
A linear progress

...

indicator at the center of the screen should indicate

...

that the screen content is loading, and that no interaction is possible until the process is completed.

Image Added

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.

Image Added

A circular progress indicator can be placed:

at the center of the screen, indicating that the screen content is loading, and that no interaction is possible until

...

the process is completed.
at the center of component, such as a

...

widget or a card, indicating that the process applies to that particular item

...

, and that interaction with the rest of the UI is possible.
In a Toast message (if a progress indicator is needed) replacing the Toast status icon.

Image Added

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.

States

<<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 >>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>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	Image Added	Image Added
Partially complete	Image Added	Image Added
Complete	Image Added	NA
Disabled	Image Added	Image Added

Circular

State	Determinate	Indeterminate
Empty	Image Added	Image Added
Partially complete	Image Added	Image Added
Complete	Image Added	NA
Disabled	Image Added	Image Added

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.

Best practices

Use:

A linear indicator can 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).

Don’t Use:

When the action lasts less than 1 second.

General:

Consider adding informative text to tell the user what is happening or explain why they are waiting. Provide a general time estimate for time-consuming tasks. Don’t try to be exact: This might take five minutes can be enough to encourage users to wait.
Make sure that long operations offer the ability to cancel during the process.

Accessibility 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 ARIA progressbar role.

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

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 their width can be either fixed or dynamic. Max width will not exceed its parent container width.
- 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 below should be displayed in that scenario.

Design

Zeplin link	Screen thumbnail

<<Short Zeplin link. You
Use this
Image Removed>>

<<Screen with 200 width>>
https://zpl.io/VOOxOnk
Image Added

Code

Html macro

sanitize	false

<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>

...

Version	Old Version 9	New Version Current
Changes made by	Femi	Carlie Bradshaw
Saved on	Apr 26, 2020	Nov 02, 2023

Content Comparison

Versions Compared

Key

Description

Types

Types

Usage &

Behavior

General guidelines

<< In case of a complex component duplicate this section, describing each sub-component separately >>

Structure

Placement and Positioning

Default State

States

Interaction

Validations and errors

Transitions

Best practices

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Linear

Circular

Interaction

Best practices

Accessibility Compliance

Responsive design

Design

Code