The general patterns for interactive states:
- Hover over and selected states have the FutureLearn Blue colour
- Focus state has the FutureLearn Blue outline
- Elements in inactive state use the Medium Grey colour
For example, the 'Sign in' button on the Sign in page.
Loader is a looping animation that indicates when new content is being loaded. Loader can be displayed inside a button or on its own. It can use a pink or white style, depending on whether it appears on a white or image/colour background.
Loader is hidden by default so to trigger it you need to include the mixin in its parent element that has a loading class and tell it which element it should hide in its place. The default colour is white but you can optionally pass in a colour to the mixin to use a different colour.
By default the loader is centred within its container. To disable this, pass in
$centre: false to the mixin above. It will then appear at the top of the container.
Putting a loader on a button with text
To be able to display text alongside a loader, you can use the