Source

Napredak

Dokumentacija i primjeri za korištenje Bootstrap prilagođenih traka napretka s podrškom za naslagane trake, animirane pozadine i tekstualne oznake.

Kako radi

Komponente napretka su izgrađene od dva HTML elementa, nešto CSS-a za postavljanje širine i nekoliko atributa. Ne koristimo HTML5 <progress>element , osiguravajući da možete slagati trake napretka, animirati ih i postaviti tekstualne oznake preko njih.

  • Koristimo .progresskao omot za označavanje maksimalne vrijednosti trake napretka.
  • Koristimo unutrašnje .progress-barda ukažemo na dosadašnji napredak.
  • Za .progress-barpostavljanje njihove širine potreban je inline stil, uslužna klasa ili prilagođeni CSS.
  • .progress-barTakođer zahtijeva neke rolei atribute ariada bi ga učinili dostupnim.

Stavite sve to zajedno i imate sljedeće primjere.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap pruža pregršt uslužnih programa za podešavanje širine . Ovisno o vašim potrebama, ovo može pomoći u brzom konfiguriranju napretka.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Etikete

Dodajte oznake svojim trakama napretka postavljanjem teksta unutar .progress-bar.

25% 
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Visina

Postavljamo samo heightvrijednost na .progress, tako da ako promijenite tu vrijednost unutrašnja .progress-barće automatski promijeniti veličinu u skladu s tim.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pozadine

Koristite pozadinske uslužne klase da promijenite izgled pojedinačnih traka napretka.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Više barova

Uključite više traka napretka u komponentu napretka ako je potrebno.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Prugasta

Dodajte .progress-bar-stripedu bilo .progress-barkoji da biste primijenili prugu preko CSS gradijenta preko boje pozadine trake napretka.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animirane pruge

I prugasti gradijent se može animirati. Dodajte .progress-bar-animatedu da .progress-barbiste animirali pruge s desna na lijevo putem CSS3 animacija.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>