Wskaźnik ładowania(ang. Loader)

W celu oznaczenia procesu ładowania treści na stronach ORLEN wykorzystywana jest ujednolicona animacja wskaźnika ładowania. Animacja jest zapętlona i jest wyświetlana dopóki treść nie zostanie zaprezentowana użytkownikom.

Wskaźnik globalny


<div class="global-loader">
    <img id="globalLoader" alt="global loader" src="https://ds.orlen.pl/static/ORLEN_loader-0890d2d158ec50ec3f09cdf860eef617.gif" />
</div>

Wskaźnik globalny używany jest w sytuacji kiedy użytkownik oczekuje na załadowanie całej strony lub jej dużego fragmentu. Na stronie może być wyświetlony tylko jeden indykator globalny w tym samym momencie. Wskaźnik globalny powinien być zawsze umieszczany na środku widocznego obszaru strony lub obszaru ładowania.

Wskaźnik lokalny


<div class="local-loader"></div>


<div class="local-loader--light"></div>

Wskaźnik lokalny może być wyświetlany w wielu miejscach jednocześnie w celu oznaczenia ładowania kilku elementów strony. W zależności od koloru tła występuje w kolorze "Grey 70%" (dla jasnego tła) i kolorze "White 80%" (dla ciemnego tła). Wskaźnik lokalny powinien być umieszczany na środku obszaru ładowania.