Loading icon animation

Use the loading animation when there is a delay in a process completing, for example when a page is loading or filter selections are processing.

Text explaining what is happening is optional. It should be used where space permits.

Generating your contract

Success icon animation

Use the success animation when a user interaction has been successfully completed, for example when a user entered code has been successfully validated.

Text highlight animation

Use the highlight animation to draw the users attention to a text change in the page. This animation is usually used when text is changing due to a user interaction.

Colours from the business.gov.au colour palette can be used for the highlight colour.

Some of this text is about to change.

Heartbeat animation

Use the heartbeat animation to draw the users attention to a changing element, e.g. when a new item is added to a list.

Call to action toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Changes to this contract are being autosaved.