A radial or circular progress bar is used to indicate the progress of a process or loading with progress status. These inform the users by means of a text display, of what % of the process has been completed, intermittently. This is thus a determinate type of progress bar.

These types of progress bars can be used to show progress of upload or download of documents. They can be used for indicating progress of a process that will lead to another page. These can also be used to indicate % of wealth fund distributions or completion of a profile or can even serve as an alternate representation of the benefit wheel information. For such potential uses going forward, these have been set in the following size variations to address potential usage in relation to components across breakpoints.

Possible color variations can include the use of the secondary color in favor of accessibility.

A circular indeterminate spinner is used to indicate that a process is in running and will take an indefinite amount of time for completion. The loading time may vary and the spinner does not indicate a pace or status.

The spinner fades in and spins clockwise. It does not have any exit animation, but simply fades out as the content appears.

Spinners can be placed to indicate a page loading, card content loading and more content loading if a part of a page is taking time.

   

Spinners can be of varying sizes depending on where they are being used. The large sizes are for page level or card level loading, while smaller sizes of spinners can be used along with buttons, to communicate processing after a particular action. For example, after the submission of a form, application or request, a spinner on the button to indicating that the submit request was processing.

 

Once a Submit button (or a similar function) is clicked, the button will go into the loading state as shown above and the user will not be able to click it after that. A toast message can be used to inform the user that they will not be able to click more than one time.

   

The permissible color variations are also shown below:

 

When being used with different components to indicate loading, the spinner can appear with a message for the users as shown below:

   

The benefit wheel is used behind the pin to display the user's current or future investment strategy.. It portrays the risk level associated with their chosen diversification of assets.

   

The risk Level can be indicated by the following text:
1. Very Defensive
2. Defensive
3. Cautious
4. Neutral
5. Assertive
6. Aggressive
7. Very Aggressive

   

This text is in the center of the wheel. It follows Body 1 for large and Body 2 smaller breakpoints in white against the Mercer blue background as shown in the diagram above

An important factor in consideration for accessibility for these components is the assignment of status messages. While the messages associated with progress relate to a task or process, they don't take focus but are important to be conveyed.

   

For example, on submitting a form, when the loader appears, a screen reader would need to announce that the 'submission is being processed' and on completion should inform the user that the 'application or form was submitted'.

   

For progress bars, the component should provision for a screen reader to intermittently announce the progress status (in % in this case).