Design Pattern Library: Spinner
Problem
We have defined a new spinner for GitLab. This SVG spinner replaces the current FA spinner icon. Let's get any necessary documentation attached here so we can update the Design system and implement this new spinner.
See https://gitlab.com/gitlab-org/gitlab-ce/issues/20084 for details.
Solution
As part of this issue I ended up adding the following patterns to our pattern library:
With the following specs:
- small spinner is
16px
in diameter, has a2px
border. - small spinner is
32px
in diameter, has a3px
border. - small spinner is
64px
in diameter, has a4px
border.
Colors:
- orange: $orange-600 which is
#DE7E00
- dark: $grey-700 which is
#707070
- light: white
Animation speed for all spinners is .6s
, opacity of the transparent part is always 25%
.
Usage
Guidelines
- Try to limit the use of spinner to only one per page at a time. If you’re in a position where you think you need more loading indicators, consider using skeleton loading instead.
- Spinners shouldn't be used in combination with skeleton loading (too much animation), either one or the other should be used.
- Small spinner:
- should be used alongside text
- can be placed inside buttons (the light variant)
- can be placed inside input fields to indicate activity in the background (searchbox)
- Medium spinner:
- General usage, can be used for general loading tasks.
- Large spinner:
- Appropriate for when loading whole pages
- Consider using skeleton loading if you can. It has a positive effect on perceived speed.
- Colors:
- Orange: primary (should be used most of the time)
- Dark: secondary (alternative for when the spinner doesn't need to stand out as much)
- Light: only on dark backgrounds
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
|
---|---|
Related patterns
- Skeleton loading
- #82
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors.No text layers -
QA check by another UXer -
Add changes to the pattern library -
Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)Not a new pattern
/cc @cperessini @dimitrieh @hazelyang @jkarthik @pedroms @sarrahvesselov @sarahod @tauriedavis @katokpara @matejlatin @andyvolpe