Loading spinner

The loading spinner should only be used when the data, content of action is loading. For example, when:

• The action after component interaction is loading (i.e. form submit)
• A full page is loading (i.e. project details)
• The secondary content of the page is loading (i.e. a table in project details)
• The content of a page needs to fully reload due to a modal action (i.e. document upload)
• The content of a modal is loading (i.e. Are you sure)
• The secondary content of the page is updating (i.e. hammering next on the pagination)

The loading spinner consist of 1 line with a smooth gradient applied. This should spin clockwise as per the example in the prototype. The spinner is positioned to be optically centered.

There are 5 sizes:.

• 80px x 80px to be used on pages, panels and page content
• 48px x 48px to be used on modal dialogs
• 32px x 32px to be used on Large buttons and inputs
• 24px x 24px to be used on Medium buttons and inputs
• 20px x 20px to be used on Small buttons and inputs

The loading spinner appear temporarily, and disappear on their own without requiring user input to be dismissed. The loading spinner cannot be clicked or tapped.

Time

The loading spinner should only be displayed if the data, content or action is taking l between 1 and 4 seconds to load.

Animation

The loading spinner should spin clockwise so that one rotation takes 1 second.