Tworzenie komponentu paska wczytywania

Podstawowy przegląd tworzenia paska ładowania z dostępną kolorystyką za pomocą elementu <progress>.

Adam Argyle

W tym poście chcę podzielić się z Wami sposobem na stworzenie paska wczytywania dostosowującego się do kolorów i dostępnego dla osób z ograniczonymi możliwościami, korzystając z elementu <progress>. Wypróbuj wersję demonstracyjną i wyświetl kod źródłowy.

Demo w Chrome pokazujące jasne i ciemne, nieokreślone, rosnące i ukończone wskaźniki.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Element <progress> pokazuje użytkownikom wizualne i dźwiękowe informacje o ukończeniu. Takie wizualne informacje zwrotne są przydatne w różnych sytuacjach, np. podczas wypełniania formularza, wyświetlania informacji o pobieraniu lub przesyłaniu albo nawet informowania o tym, że postęp jest nieznany, ale praca nadal trwa.

W tym wyzwaniu dotyczącym interfejsu użytkownika wykorzystano istniejący element HTML <progress>, aby zaoszczędzić trochę wysiłku w zakresie ułatwień dostępu. Kolory i układy przesuwają granice możliwości dostosowywania wbudowanego elementu, aby unowocześnić komponent i ułatwić jego dopasowanie do systemów projektowania.

Jasne i ciemne karty w każdej przeglądarce, pokazujące od góry do dołu ikonę dostosowaną do danej przeglądarki: Safari, Firefox, Chrome.
Demo w przeglądarkach Firefox, Safari, Safari na iOS, Chrome i Chrome na Androida w jasnym i ciemnym schemacie.

Znacznik

Element <progress> został zawinięty w element <label>, aby można było pominąć jawne atrybuty relacji na rzecz niejawnej relacji. Oznaczyłem też element nadrzędny, na który wpływa stan wczytywania, aby czytniki ekranu mogły przekazać te informacje użytkownikowi.

<progress></progress>

Jeśli nie ma elementu value, postęp elementu jest nieokreślony. Atrybut max ma domyślnie wartość 1, więc postęp mieści się w przedziale od 0 do 1. Ustawienie wartości max na 100 ustawi zakres na 0–100. Wybrałem, aby wartości znajdowały się w zakresie od 0 do 1, przekształcając wartości postępu na 0,5 lub 50%.

Postęp w ramach etykiety

W przypadku relacji domyślnej element postępu jest otoczony etykietą w taki sposób:

<label>Loading progress<progress></progress></label>

W mojej wersji demonstracyjnej uwzględniono etykietę tylko dla czytników ekranu. Aby to zrobić, użyj elementu <span> i zastosuj do niego odpowiednie style, aby był niewidoczny na ekranie:

<label>
  <span class="sr-only">Loading progress</span>
  <progress></progress>
</label>

z usługą porównywania cen, która zawiera następujący kod CSS z WebAIM:

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Zrzut ekranu narzędzi programistycznych pokazujący element widoczny tylko na ekranie.

Obszar dotknięty przez postęp wczytywania

Jeśli masz dobry wzrok, możesz łatwo powiązać wskaźnik postępu z powiązanymi elementami i obszarami strony, ale użytkownicy niedowidzący nie mają tego komfortu. Aby to poprawić, przypisz atrybut aria-busy do najwyższego elementu, który zmieni się po zakończeniu wczytywania. Ponadto należy wskazać związek między postępem a strefą wczytywania za pomocą aria-describedby.

<main id="loading-zone" aria-busy="true">
  …
  <progress aria-describedby="loading-zone"></progress>
</main>

W JavaScriptu przełącz aria-busy na true na początku zadania, a na false – po jego zakończeniu.

Dodatki atrybutów ARIA

Chociaż domyślna rola elementu <progress> to progressbar, w przypadku przeglądarek, które nie mają tej domyślnej roli, dodałem ją wprost. Dodaliśmy też atrybut indeterminate, aby wyraźnie ustawić stan elementu jako nieznany. Jest to wyraźniejsze niż obserwowanie, że element nie ma ustawionego atrybutu value. 

<label>
  Loading 
  <progress 
    indeterminate 
    role="progressbar" 
    aria-describedby="loading-zone"
    tabindex="-1"
  >unknown</progress>
</label>

Użyj tabindex="-1", aby umożliwić skupienie na elemencie postępu z poziomu kodu JavaScript. Jest to ważne dla technologii czytników ekranu, ponieważ powiadomienie o postępach w wypełnianiu formularza pozwoli użytkownikowi dowiedzieć się, jak daleko zaawansował.

Style

Element postępu jest nieco problematyczny pod względem stylizacji. Wbudowane elementy HTML mają specjalne ukryte części, które mogą być trudne do wybrania, i często oferują tylko ograniczony zestaw właściwości do ustawienia.

Układ

Style układu mają zapewnić pewną elastyczność w zakresie rozmiaru elementu postępu i pozycji etykiety. Dodano specjalny stan zakończenia, który może być przydatnym, ale nieobowiązkowym dodatkowym sygnałem wizualnym.

<progress> Układ

Szerokość elementu postępu pozostaje bez zmian, aby mogła się ona zmniejszać i zwiększać wraz z przestrzenią potrzebną w projektie. Wbudowane style są usuwane przez ustawienie appearance i border na none. Dzięki temu element może być normalizowany w różnych przeglądarkach, ponieważ każda przeglądarka ma własne style dla tego elementu. 

progress {
  --_track-size: min(10px, 1ex);
  --_radius: 1e3px;

  /*  reset  */
  appearance: none;
  border: none;

  position: relative;
  height: var(--_track-size);
  border-radius: var(--_radius);
  overflow: hidden;
}

Wartość 1e3px dla _radius jest wyrażona za pomocą notacji wykładniczej, aby przedstawić dużą liczbę, więc border-radius jest zawsze zaokrąglana. To 1000px. Lubię go używać, ponieważ moim celem jest użycie wartości na tyle dużej, że mogę ją ustawić i zapomnieć (i jest krótsza do zapisania niż 1000px). W razie potrzeby można ją też łatwo zwiększyć: wystarczy zmienić 3 na 4, a 1e4px będzie odpowiadać 10000px.

Używany jest styl overflow: hidden, który wzbudza kontrowersje. Ułatwiło to kilka rzeczy, np. nie trzeba było przekazywać wartości border-radius do ścieżki ani elementów wypełniania ścieżki. Oznaczało to jednak też, że żadne elementy podrzędne postępu nie mogły znajdować się poza elementem. Inną wersję tego elementu postępu można utworzyć bez overflow: hidden. Może to stworzyć możliwości tworzenia animacji lub lepszych stanów ukończenia.

Gotowe

Selektory CSS wykonują tu ciężką pracę, porównując wartość maksymalną z wartością, a jeśli się zgadzają, proces jest zakończony. Po zakończeniu generowany jest pseudoelement, który jest dołączany na końcu elementu postępu, co stanowi dodatkową wizualną wskazówkę dla użytkownika.

progress:not([max])[value="1"]::before,
progress[max="100"][value="100"]::before {
  content: "✓";
  
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  display: flex;
  align-items: center;
  padding-inline-end: max(calc(var(--_track-size) / 4), 3px);

  color: white;
  font-size: calc(var(--_track-size) / 1.25);
}

Zrzut ekranu przedstawiający pasek ładowania na poziomie 100% z zaznacznikiem na końcu.

Kolor

Przeglądarka używa własnych kolorów dla elementu postępu i dostosowuje się do jasnych i ciemnych kolorów za pomocą tylko jednej właściwości CSS. Można to rozszerzyć o specjalne selektory dla poszczególnych przeglądarek.

Jasne i ciemne style przeglądarki

Aby włączyć w witrynie ciemny i jasny element <progress>, wystarczy użyć tagu color-scheme.

progress {
  color-scheme: light dark;
}

Kolor wypełnienia postępu pojedynczej usługi

Aby zastosować odcień do elementu <progress>, użyj accent-color.

progress {
  accent-color: rebeccapurple;
}

Zwróć uwagę, że kolor tła ścieżki zmienia się z jasnego na ciemny w zależności od accent-color. Przeglądarka zapewnia odpowiedni kontrast: bardzo fajne.

Kolory jasne i ciemne w pełni dostosowane do potrzeb

Ustaw 2 właściwości niestandardowe w elemencie <progress>: jedną dla koloru ścieżki, a drugą dla koloru postępu ścieżki. W zapytaniu o media prefers-color-schemepodaj nowe wartości kolorów ścieżki i postępu ścieżki.

progress {
  --_track: hsl(228 100% 90%);
  --_progress: hsl(228 100% 50%);
}

@media (prefers-color-scheme: dark) {
  progress {
    --_track: hsl(228 20% 30%);
    --_progress: hsl(228 100% 75%);
  }
}

Style fokusu

Wcześniej nadaliśmy elementowi ujemny indeks tabulacji, aby można było go skupić programowo. Użyj:focus-visible, aby dostosować ustawienia ostrości i wybrać inteligentniejszy styl pierścienia podświetlenia. W tym przypadku kliknięcie myszką i ustawienie kursora nie spowoduje wyświetlenia pierścienia, ale kliknięcia klawiaturą. Film w YouTube zawiera więcej informacji na ten temat i warto go obejrzeć.

progress:focus-visible {
  outline-color: var(--_progress);
  outline-offset: 5px;
}

Zrzut ekranu z paskiem wczytywania z pierścieniem ostrości wokół Wszystkie kolory są zgodne.

Style niestandardowe w różnych przeglądarkach

Dostosuj style, wybierając części elementu <progress>, które są dostępne w danym przeglądarce. Użycie elementu postępu to pojedynczy tag, ale składa się on z kilku elementów podrzędnych, które są wyświetlane za pomocą pseudoselektorów CSS. Jeśli włączysz to ustawienie, Narzędzia deweloperskie Chrome wyświetlą te elementy:

  1. Kliknij prawym przyciskiem myszy stronę i wybierz Zbadaj element, aby otworzyć Narzędzia deweloperskie.
  2. W prawym górnym rogu okna Narzędzia programistyczne kliknij ikonę koła zębatego Ustawienia.
  3. W sekcji Elementy znajdź i zaznacz pole wyboru Pokaż DOM w cieni klienta użytkownika.

Zrzut ekranu pokazujący, gdzie w Narzędziach deweloperskich można włączyć wyświetlanie elementu shadow DOM klienta użytkownika.

stylów Safari i Chromium.

Przeglądarki oparte na WebKit, takie jak Safari i Chromium, udostępniają funkcje ::-webkit-progress-bar i ::-webkit-progress-value, które umożliwiają używanie podzbioru CSS. Na razie ustaw background-color za pomocą właściwości niestandardowych utworzonych wcześniej, które dostosowują się do ciemnych i jasnych kolorów.

/*  Safari/Chromium  */
progress[value]::-webkit-progress-bar {
  background-color: var(--_track);
}

progress[value]::-webkit-progress-value {
  background-color: var(--_progress);
}

Zrzut ekranu przedstawiający elementy wewnętrzne elementu postępu.

Style w Firefoksie

Firefox udostępnia elementowi <progress> tylko pseudoselektor ::-moz-progress-bar. Oznacza to też, że nie możemy bezpośrednio przyciemnić ścieżki. 

/*  Firefox  */
progress[value]::-moz-progress-bar {
  background-color: var(--_progress);
}

Zrzut ekranu z Firefoxem i miejscem, w którym znajdują się elementy elementu postępu.

Zrzut ekranu z zakładką Debugowanie, w której w Safari, Safari na iOS, Firefoxie, Chrome i Chrome na Androidzie widać działający pasek wczytywania.

Zwróć uwagę, że w Firefox kolor ścieżki jest ustawiony na accent-color, a w Safari na iOS na jasnoniebieski. To samo w trybie ciemnym: Firefox ma ciemny ślad, ale nie ma niestandardowego koloru, który ustawiliśmy. Działa to w przeglądarkach opartych na Webkit.

Animacja

Podczas korzystania z wbudowanych w przeglądarkę pseudoselektorów często mamy do czynienia z ograniczonym zestawem dozwolonych właściwości CSS.

Animowanie wypełniania ścieżki

Dodanie przejścia doinline-size elementu postępu działa w przypadku Chromium, ale nie w przypadku Safari. Firefox nie używa też właściwości przejścia w swoim ::-moz-progress-bar.

/*  Chromium Only 😢  */
progress[value]::-webkit-progress-value {
  background-color: var(--_progress);
  transition: inline-size .25s ease-out;
}

Animowanie stanu :indeterminate

Tutaj mogę trochę bardziej poszaleć, więc pokażę animację. Tworzony jest pseudoelement dla Chromium, a w przypadku wszystkich 3 przeglądarek stosowany jest gradient, który jest animowany w obrębie wszystkich przeglądarek.

Właściwości niestandardowe

Właściwości niestandardowe są przydatne w wielu sytuacjach, ale jedną z moich ulubionych funkcji jest po prostu nadawanie nazw magicznie wyglądającym wartościom w CSS. Poniżej znajduje się dość skomplikowany linear-gradient, ale ma ładną nazwę. jego cel i przypadki użycia są jasne;

progress {
  --_indeterminate-track: linear-gradient(to right,
    var(--_track) 45%,
    var(--_progress) 0%,
    var(--_progress) 55%,
    var(--_track) 0%
  );
  --_indeterminate-track-size: 225% 100%;
  --_indeterminate-track-animation: progress-loading 2s infinite ease;
}

Właściwości niestandardowe pomogą też zachować kod w stanie DRY, ponieważ nie możemy grupować tych selektorów związanych z poszczególnymi przeglądarkami.

klatki kluczowe,

Celem jest nieskończona animacja, która odtwarza się w obie strony. Kluczowe klatki początkowe i końcowe zostaną ustawione w CSS. Aby utworzyć animację, która wraca do punktu początkowego, wystarczy użyć jednej klatki kluczowej, tej środkowej na poziomie 50%.

@keyframes progress-loading {
  50% {
    background-position: left; 
  }
}

Kierowanie na poszczególne przeglądarki

Nie każda przeglądarka umożliwia tworzenie pseudoelementów w samym elemencie <progress>lub animowanie paska postępu. Więcej przeglądarek obsługuje animację ścieżki niż pseudoelement, więc przekształcam pseudoelementy w animowane paski.

Pseudoelement Chromium

Chromium zezwala na użycie pseudoelementu ::after z pozycją, aby objąć element. Używane są nieokreślone właściwości niestandardowe, a animacja w przód i w tył działa bardzo dobrze.

progress:indeterminate::after {
  content: "";
  inset: 0;
  position: absolute;
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
Pasek postępu Safari

W przypadku Safari właściwości niestandardowe i animacja są stosowane do paska postępu pseudoelementu:

progress:indeterminate::-webkit-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
Pasek postępu w Firefox

W przypadku Firefoksa właściwości niestandardowe i animacja są też stosowane do paska postępu pseudoelementu:

progress:indeterminate::-moz-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}

JavaScript

Kod JavaScript odgrywa ważną rolę w przypadku elementu <progress>. Określa ona wartość wysyłaną do elementu i zapewnia, że w dokumencie jest wystarczająca ilość informacji dla czytników ekranu.

const state = {
  val: null
}

Demonstracja zawiera przyciski do sterowania postępem. Aktualizują one state.val, a następnie wywołują funkcję do aktualizowania DOM.

document.querySelector('#complete').addEventListener('click', e => {
  state.val = 1
  setProgress()
})

setProgress()

W tej funkcji odbywa się koordynacja interfejsu użytkownika. Zacznij od utworzenia funkcji setProgress(). Nie są wymagane żadne parametry, ponieważ ma on dostęp do obiektu state, elementu postępu i strefy <main>.

const setProgress = () => {
  
}

Ustawianie stanu wczytywania w strefie <main>

W zależności od tego, czy postępy są zakończone, powiązany element <main> wymaga zaktualizowania atrybutu aria-busy:

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)
}

Wyczyść atrybuty, jeśli ilość wczytywania jest nieznana

Jeśli wartość jest nieznana lub nieskonfigurowana, null w tym przypadku usuń atrybuty value i aria-valuenow. Spowoduje to ustawienie wartości <progress> na nieokreśloną.

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }
}

Rozwiązywanie problemów z matematyką dziesiętną w JavaScriptzie

Ponieważ zdecydowałem się na domyślną maksymalną wartość postępu równą 1, funkcje zwiększania i zmniejszania w tym przykładzie używają arytmetyki dziesiętnej. JavaScript i inne języki nie zawsze się do tego nadają. Oto funkcja roundDecimals(), która przycina nadmiar wyników obliczeń:

const roundDecimals = (val, places) =>
  +(Math.round(val + "e+" + places)  + "e-" + places)

Zaokrąglaj wartość, aby była czytelna:

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"
}

Ustawianie wartości dla czytników ekranu i stanu przeglądarki

Wartość jest używana w 3 miejscach w DOM:

  1. Atrybut value elementu <progress>.
  2. Atrybut aria-valuenow.
  3. Treść wewnętrzna tagu <progress>.
const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"

  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent
}

Ustawienie fokusa na postępach

Po zaktualizowaniu wartości użytkownicy z dobrym wzrokiem zobaczą zmianę postępu, ale użytkownicy czytników nie otrzymają jeszcze powiadomienia o zmianie. Wyśrodkuj element <progress>, a przeglądarka poinformuje o aktualizacji.

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"

  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent

  progress.focus()
}

Zrzut ekranu aplikacji Voice Over na Macu, która odczytuje użytkownikowi postęp ładowania.

Podsumowanie

Teraz, gdy już wiesz, jak to zrobić, jak Ty to zrobisz? 🙂

Z pewnością wprowadzę kilka zmian, jeśli tylko będę mieć taką możliwość. Myślę, że można uporządkować obecny komponent i spróbować stworzyć nowy bez ograniczeń stylu pseudoklasy elementu <progress>. Warto je poznać.

Zróżnicujemy nasze podejścia i poznamy wszystkie sposoby tworzenia stron internetowych.

Utwórz wersję demonstracyjną, wyślij mi linki, a ja dodam je do sekcji z remiksami społeczności.

Remiksy społeczności