Wait-confirm

Combined spinner containing two sub-processes, loading and confirmation.

Short description

Spinner suitable for processes that requires a combination of loading and confirmation checkmark.

When and how to use it

The spinner can be used when your function requires a loading sequence and a successful confirmation mark. An example: User is successful when booking an advisory meeting.

This process requires two sub-processes:

  1. The actual time the systems take to complete the booking (just loading and spinning)
  2. When booking is successfully completed and the spinner is transformed into the checkmark.

The component is not suitable for only refresh/loading a page or a set of data. Use progress bar or ordinary spinner, for instance.

Remember to design a fall-back solution if the process fail. The spinner is only designed for happy flow.

Behaviour

When triggering the spinner, e.g. from “Book meeting” button, the viewport should be freezed and the loading spinner is started. After the checkmark sequence, we are sending the user to a confirmation page. The component behaviour does not differ on any device.

Do's and don'ts

Do
  • Use for time consuming loading processes
  • When you need the combination of loading and confirmation spinner
  • Spinner takes full viewport and freezes current activity
Don't
  • Use if you only are about to refresh/load a page or a set of data