...

Description

Progress indicators express an unspecified wait time or show that an operation is currently ongoing. They display the current completed completion ratio of a process or action.an operation or a visual animation that conveys an unspecified wait time.

...

Types 

Linear & Circular

LUX offers There are two visually-distinct variations types of progress indicatorsindicator: linear and circular progress indicators.

Only one type should represent each kind of activity in an appapplication. 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 app.

Type	Usage	Image
Linear

Progress Indicator

Linear progress indicators

display process by visualizing an indicator increasing

are often referred to as a Progress bar. Determinate indicators are for operations where the duration of the process is known. The indicator increases in width from 0 to 100% of

a track. This is animated

the track, in sync with the process’s progress.

The behaviour

Indeterminate indicators are for operations where the duration of the process is not known. The indicator is

dependent on whether the progress of a

continuously animated along the track until the process is

known

complete. They can be applied to the entire page, large containers, and to form elements.	Image Modified Image Modified
Circular

Progress Indicator

Circular progress indicators

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

are often referred to as a Progress spinner. Determinate indicators are for operations where the length of the process is 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

a surface

an element, such as a button or card.

Image Modified

Image Removed

Image Added

Usage &

...

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

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 and the type of indicator being used.

Default State

Generally, progress 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 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

...

States

...

• 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

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

...

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.

...

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

...

• .

Accessibility compliance

...

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

Focus management

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 - see Screen Reader Guidelines

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
https://zpl.io/

2pn8JlaImage Removed

VOOxOnk

Image Added

Code

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