Component: Spinner - Githubissues

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

106 stars 13 forks source link

Component: Spinner #1968

Closed wueestd closed 4 months ago

wueestd commented 8 months ago

Figma https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=16527%3A53294&mode=design&t=UhNqX9sEMKDoYiIW-1

https://www.figma.com/file/KDAqx5qYIhMt5YnB7HJVSE/post_library_atoms?type=design&node-id=0%3A989&mode=design&t=ddjqgJJN8zFcsroI-1

Code https://design-system.post.ch/#/post-samples/spinner

Doc https://www.experience-hub.ch/document/2803#/molecules-erweiterte-elemente/loaders

kaloyanso commented 7 months ago

The Spinner component is located here: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=16527%3A53294&mode=design&t=Slj8iVVIDxffeqCC-1

wueestd commented 7 months ago

ready for dev review @gfellerph

alizedebray commented 7 months ago

To check:

[x] sizes → currently we only have 3: xs (12px) used in buttons, sm (32px) and the default (56px) both used with an overlay
[x] thickness → difficult to say with the SVG but the current spinners seem to be bolder
[x] speed → current spinner speed is 2s

alizedebray commented 6 months ago

We will increase the spead to 600ms and keep a 12px spinner for buttons. Regarding the border width, we still have to check which size can fit the 12px spinner and then scale for all other sizes.

kaloyanso commented 5 months ago

Hi @alizedebray, I added a 12px size to the spinner collection. The border of it is now 2px, and it makes the smallest sizes more visible.

rouvenpost commented 4 months ago

Spinner is Ready for Dev.

alizedebray commented 4 months ago

Dev ticket created: #2445