diff options
| author | Dimitrie Hoekstra <dimitriehoekstra@gmail.com> | 2017-09-28 14:41:18 +0200 |
|---|---|---|
| committer | Dimitrie Hoekstra <dimitriehoekstra@gmail.com> | 2017-09-28 14:41:18 +0200 |
| commit | 9fb540af80945bb60d408c14c1a41e653311cdae (patch) | |
| tree | e37b4fb663f955cba9a9aad9daa6bf38f03c22ca | |
| parent | 35f773e5cfb960b9af62403412b3d92b752fe733 (diff) | |
| download | gitlab-ce-9fb540af80945bb60d408c14c1a41e653311cdae.tar.gz | |
Added skeleton loading section to the animation page of the ux guide
| -rw-r--r-- | doc/development/ux_guide/animation.md | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/doc/development/ux_guide/animation.md b/doc/development/ux_guide/animation.md index 5dae4bcc905..eb8aa51dad8 100644 --- a/doc/development/ux_guide/animation.md +++ b/doc/development/ux_guide/animation.md @@ -39,6 +39,12 @@ When information is updating in place, a quick, subtle animation is needed. The  +### Skeleton loading + +Skeleton loading is explained in the [component section](/help/development/ux_guide/components.md#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`. + + + ### 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`. @@ -54,4 +60,4 @@ View the [interactive example](http://codepen.io/awhildy/full/ALyKPE/) here. 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. -
\ No newline at end of file + |