Provides continuous feedback regarding the progress of an operation.
Progress indicators provide users continuous feedback regarding the progress of an operation. The visual element helps the user understand something is happening and makes the action feel faster and more responsive.
A progress indicator bar should be used when the completion status can be estimated in real-time. The bar gradually fills with color as the operation progresses.
A loading indicator animation should be used when the completion status cannot be estimated, or when a visual element is updating. The animation reinforces that the operation is occurring.
Some operations can be controlled by the user. In these cases, the user controlled progress indicator is accompanied by options such as Cancel or Pause. Such controls appear beneath the bar and are left-aligned.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
The progressbar role should be used for an element that displays the progress status for a task that takes a significant time. Elements with the role progressbar have an implicit aria-readonly value of true.
If the actual value of the progressbar can be determined, this should be indicated using the aria-valuenow, aria-valuemin, and aria-valuemax attributes.
If the progress value is indeterminate, omit the aria-valuenow attribute.
As the task progresses, the aria-valuenow value has to be updated dynamically to indicate this progress to assistive technology.
If the progressbar is describing the loading progress of a page region, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.
It's not possible for the user to alter the value of a progressbar because it's always readonly.
When a component can be missing required elements due to loading, the containing element should be marked with aria-busy="true". For example, until a form submission operation has completed, the corresponding form element should be marked as busy.
For the modal loading indicator, see also the Accessibility guidelines for Modals.
A loading animation should have the Aria role="status".
The animation should contain assistive text that explains what is currently happening.