Animacja obrazu SVG

Podczas skręcania na tym ekranie wizualnie powstaje (w umiarkowanej prędkości) szara linia, dopóki nie zakończy się jej element (schemat). Następnie, przy niewielkiej przerwie od początku ruchu szary linii, niebieska strzałka rozpoczyna swój ruch do pierwszego etapu. Następnie pojawi się informacja na tym etapie.

Podczas przeglądania danego ekranu klient wskazuje na etapy kursorem (w rezultacie przycisk z numerem etapu zapala się), a przy kliknięciu następuje dalsze pobieranie niebieskiego obwodu do następnego etapu. Podążamy za zasadą podobieństwa do ostatniego etapu.

Jeśli nie ma interakcji z tym ekranem, etapy są przeładowane przy skręcaniu z piątego na szósty. Błękitny pas kończy swój ruch na ostatnim etapie.

wideo animacji gotowej - https://drive.google.com/file/d/1D4Ufv-oBJxut9LpC1thFY40JFlCIz2Vi/view