diff options
-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 ![Quick update animation](img/animation-quickupdate.gif) +### 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`. + +![Skeleton loading animation](img/skeleton-loading.mp4) + ### 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. -![Autoscroll animation](img/animation-autoscroll.gif)
\ No newline at end of file +![Autoscroll animation](img/animation-autoscroll.gif) |