Pasek postępu w CSS - progress bar w kilku linijkach kodu - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

Pasek postępu w CSS – progress bar w kilku linijkach kodu

6 maja, 2016

Dominik-W

Pasek postępu (progress bar) w projekcie Web? Jasne – i to bez użycia obrazków. Dziś krótko i na temat.

Pasek postępu w CSS i HTML5

Możemy skorzystać z HTML5 i Bootstrap, lub zdefiniować własne style CSS.

Sposób 1 – HTML5

Dodajmy do strony Bootstrap i jQuery, oraz kod jak poniżej.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Gotowe. Mamy pasek postępu! Kolory i postęp definiujemy poprzez klasy CSS (np. class=”progress-bar progress-bar-danger”) oraz właściwości (np. role=”progressbar”, aria-valuenow=”100″). A ponadto ustawiamy szerokość elementu (style width).

Więcej przykładów pasków postępu poniżej.

...  
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
      aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
      Success
    </div>
  </div>
  
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
      Info
    </div>
  </div>

  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
      Warning
    </div>
  </div>
  
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100"
      aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      Danger
    </div>
  </div>

Prosto i efektywnie. Przykładowe paski postępu:

Paski postępu z użyciem Bootstrap

Być może jednak chcemy stworzyć własny pasek postępu w CSS – żaden problem.

Sposób 2 – CSS

Załóżmy, że nie chcemy używać Bootstrapa, chcemy za to mieć pełną kontrolę nad wyglądem naszych pasków postępu. Do ich stworzenia wystarczy do tego prosty trick CSS.

  #my-progress-bar {
    background: #ccc;
    border-radius: 12px;
    height: 22px;
    width: 330px;
    padding: 0px;
    margin: 0 auto;
  }
   
  #my-progress-bar:after {
    content: '';
    display: block;
    background: #0c0;
    width: 50%;
    height: 100%;
    border-radius: 9px;
  }

Teraz wystarczy pokazać nasz progress bar:

<div id="my-progress-bar"></div>

Demo:

Pasek postępu w CSS

Zasoby:

Książki o CSS, HTML5, JavaScript

ProBars – jQuery animated progress bars plugin

Slim progress bar jQuery plugin – NProgress

Więcej interesujących rozwiązań CSS znajdziemy tutaj.

Pasek postępu w CSS – podsumowanie

Jak widać HTML5, Bootstrap oraz CSS przynoszą nam dość możliwości, aby prosto i przyjemnie tworzyć na stronach WWW obiekty takie jak paski postępu, bez użycia obrazków.

Dziękuję za uwagę. Miłej zabawy.