Pasek postępu w HTML i CSS: jak go zrobić krok po kroku

Pasek postępu (css progress bar) to ważny element na stronie: przydaje się przy pobieraniu plików, pokazywaniu poziomu umiejętności i w wielu innych miejscach. Pasek postępu da się zbudować samym HTML-em i CSS-em. Żeby taki pasek reagował na zmiany, potrzebny będzie JavaScript, to nie jest temat tego artykułu, ale niewykluczone, że napiszę dalszą część z JavaScriptem. 

W tym artykule nauczymy się tworzyć paski postępu w HTML-u i CSS-ie. Pasek postępu buduje się z dwóch elementów „div”: diva, który go otacza (wrapper), i diva samego postępu (progressbar), tak jak w poniższych przykładach.

Budowa paska postępu w CSS

html progress bar

<h1 class="text-center">Téléchargement</h1>
 <div class="container">
     <p>video.mp4</p>
     <div class="progressbar-wrapper">
      <div title="downloaded" class="progressbar mp4">100%</div>
     </div>

<p>musique.mp3</p>
     <div class="progressbar-wrapper">
      <div title="downloading" class="progressbar mp3">60%</div>
     </div>
</div>

W CSS ozdobimy oba divy przy użyciu atrybutu aria-label. Długość postępu ustawiamy przez width w klasach mp4 i mp3.

css progress bar

:root {
  --success: #00b894;
  --progress: #e17055;
}

.progressbar-wrapper {
  background-color: #dfe6e9;
  color: white;
  border-radius: 15px;
  width: 100%;
}

.progressbar {
  background-color: var(--progress);
  color: white;
  padding: 1rem;
  text-align: right;
  font-size: 20px;
  border-radius: 15px;
}

.progressbar[title="downloading"] {
   background-color: var(--progress);
}

.progressbar[title="downloaded"] {
   background-color: var(--success);
}

.mp4 {
  width: 100%;
}

.mp3 {
  width: 60%;
}

Po co używać title?

Title nie przydaje się dużej części odbiorców, ale bywa pomocny dla osoby z niepełnosprawnością, tacy użytkownicy mogą oczekiwać na przykład dymka z podpowiedzią. Z tego względu atrybut title można stosować razem z aria-label, żeby przeglądarki i czytniki ekranu lepiej sobie z nim radziły. Upiekliśmy dwie pieczenie na jednym ogniu, bo CSS-em wyróżniamy też pasek, który doszedł do końca. 
Osoba korzystająca z lupy ekranowej albo z wadą wzroku dotrze dzięki temu do stanu paska postępu przez dymek lub przez asystenta głosowego.

Efekt naszego paska postępu w CSS

Tutaj łączymy obie powyższe sekcje, żeby uzyskać pasek postępu wyłącznie w CSS i HTML, wynik zobaczysz w moim CodePenie poniżej:

See the Pen
Untitled by Damien Flandrin (@dam62500)
on CodePen.dark