Commit 66dd045e authored by Robert Speicher's avatar Robert Speicher

Merge branch 'skeleton-loading-paradigm' into 'master'

Added skeleton loading paradigm to UX guide

Closes gitlab-design#35

See merge request gitlab-org/gitlab-ce!14556
parents 2828b768 fe3d9667
...@@ -39,6 +39,12 @@ When information is updating in place, a quick, subtle animation is needed. The ...@@ -39,6 +39,12 @@ When information is updating in place, a quick, subtle animation is needed. The
![Quick update animation](img/animation-quickupdate.gif) ![Quick update animation](img/animation-quickupdate.gif)
### Skeleton loading
Skeleton loading is explained in the [component section](components.html#skeleton-loading) of the UX guide. It includes a horizontally pulsating animation that shows motion as if it's growing. It's timing is a slower `linear 1s`.
![Skeleton loading animation](img/skeleton-loading.gif)
### Moving transitions ### Moving transitions
When elements move on screen, there should be a quick animation so it is clear to users what moved where. The timing of this animation differs based on the amount of movement and change. Consider animations between `200ms` and `400ms`. When elements move on screen, there should be a quick animation so it is clear to users what moved where. The timing of this animation differs based on the amount of movement and change. Consider animations between `200ms` and `400ms`.
...@@ -51,7 +57,9 @@ View the [interactive example](http://codepen.io/awhildy/full/ALyKPE/) here. ...@@ -51,7 +57,9 @@ View the [interactive example](http://codepen.io/awhildy/full/ALyKPE/) here.
![Reorder animation](img/animation-reorder.gif) ![Reorder animation](img/animation-reorder.gif)
#### Autoscroll the page #### Autoscroll the page
Another example of a moving transition is when you have to autoscroll the page to keep an active element visible. Another example of a moving transition is when you have to autoscroll the page to keep an active element visible.
View the [interactive example](http://codepen.io/awhildy/full/PbxgVo/) here. View the [interactive example](http://codepen.io/awhildy/full/PbxgVo/) here.
![Autoscroll animation](img/animation-autoscroll.gif) ![Autoscroll animation](img/animation-autoscroll.gif)
...@@ -204,6 +204,25 @@ Cover blocks are generally used to create a heading element for a page, such as ...@@ -204,6 +204,25 @@ Cover blocks are generally used to create a heading element for a page, such as
--- ---
## Skeleton loading
Skeleton loading is a way to convey to the user what kind of content is currently being loaded. It's a paradigm with which content can independently and asynchronously be loaded, while still adhering to the structure and look of the completely loaded view.
### Requirements
* A skeleton should represent an organism in a recognisable way
* Atom elements within organisms (for reference see this article on [atomic design methodology](http://atomicdesign.bradfrost.com/chapter-2/)) may be represented in a maximum of 3 repetitions, if applicable.
* Skeletons should only be presented in grayscale using the HEX colors: `#fafafa` or `#ffffff` (except for shadows)
* Animate the grey atoms in a pulsating way to show motion, as if "loading". The pulse animation transitions colors horizontally from left to right, starting with `#f2f2f2` to `#fafafa`.
![Skeleton loading animation](img/skeleton-loading.gif)
### Usage
Skeleton loading can replace any existing UI elements for the period in which they are loaded and should aim for maintaining a similar structure visually.
---
## Panels ## Panels
> TODO: Catalog how we are currently using panels and rationalize how they relate to alerts > TODO: Catalog how we are currently using panels and rationalize how they relate to alerts
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment