Framfarir

Skjöl og dæmi til að nota Bootstrap sérsniðnar framvindustikur sem bjóða upp á stuðning við staflaða stikur, teiknaðan bakgrunn og textamerki.

Á þessari síðu

Hvernig það virkar

Framvinduhlutir eru byggðir með tveimur HTML þáttum, sumum CSS til að stilla breiddina og nokkrum eiginleikum. Við notum ekki HTML5 <progress>þáttinn , sem tryggir að þú getir staflað framvindustikum, gert þær hreyfimyndir og sett textamerki yfir þær.

Við notum .progresssem umbúðir til að gefa til kynna hámarksgildi framvindustikunnar.
Við notum hið innra .progress-bartil að sýna framfarirnar hingað til.
Það .progress-barkrefst innbyggðs stíls, gagnaflokks eða sérsniðins CSS til að stilla breidd þeirra.
Það .progress-barkrefst líka nokkurra roleog ariaeiginleika til að gera það aðgengilegt.

Settu þetta allt saman og þú hefur eftirfarandi dæmi.

<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 býður upp á handfylli af tólum til að stilla breidd . Það fer eftir þörfum þínum, þetta gæti hjálpað til við að stilla framfarir fljótt.

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

Merki

Bættu merkimiðum við framvindustikurnar þínar með því að setja texta í .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>

Hæð

Við setjum aðeins heightgildi á .progress, þannig að ef þú breytir því gildi mun innra .progress-barstærð sjálfkrafa breytast í samræmi við það.

<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>

Bakgrunnur

Notaðu bakgrunnsforrit til að breyta útliti einstakra framvindustika.

<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>

Margar stangir

Hafa margar framvindustikur í framvinduhluta ef þú þarft.

<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>

Röndótt

Bættu .progress-bar-stripedvið hvaða sem er .progress-bartil að setja rönd með CSS halla yfir bakgrunnslit framvindustikunnar.

<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>

Hreyfimyndaðar rendur

Einnig er hægt að hreyfa röndótta hallann. Bættu .progress-bar-animatedvið til .progress-barað lífga rendurnar frá hægri til vinstri í gegnum CSS3 hreyfimyndir.

<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>

Sass

Breytur

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Lyklarammar

Notað til að búa til CSS hreyfimyndir fyrir .progress-bar-animated. Innifalið í scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}