Puriy

Qillqakuna chaymanta ejemplokuna Bootstrap sapanchasqa ñawpaqman puriy barrakuna llamk'achinapaq yanapakuyniyuq pilasqa barrakuna, kawsachisqa qhipakuna chaymanta qillqa etiquetakuna.

Kay p'anqapi

Imayna llamkan

Ñawpaqman puriy componentekuna iskay HTML elementokunawan ruwasqa kanku, wakin CSS anchota churanapaq, chaymanta huk pisi atributokuna. Mana HTML5 <progress>elementota llamk'achiykuchu , ñawpaqman puriy barrakunata pilayta atikunki, kawsachiyta atikunki chaymanta qillqa etiquetakuna chay patapi churayta atikunki.

Chayta .progresshuk p'istu hina llamk'achiyku ñawpaqman puriy barrapa max chaninninta rikuchinapaq.
Ukhuwanmi .progress-barkunankama imakunachus ñawparisqanmanta rikuchiyku.
The .progress-barhuk chiru ukhupi estilo, yanapakuy clase utaq sapanchasqa CSS anchunku churanapaq munan.
The .progress-bartambién requiere algunos roley ariaatributos para hacerlo accesible.

Chayta llapanta huñuy, hinaspa kay ejemplokunata tarinki.

<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 huk maki yanapakuykunata qun anchota churanapaq . Necesitasqaykiman hina, kaykunaqa yanapanman usqhaylla ñawpaqman puriyta wakichiypi.

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

Etiquetas

Ñawpaqman puriy barraykikunaman etiquetakunata yapay qillqa ukhupi churaspa .progress-bar.

25% nisqa.

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

Sayay

Huk heightchanillata churayku .progress, chayrayku sichus chay chanita tikranki chay ukhu .progress-barkikinmanta chaymanhina sayayninta tikranqa.

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

Antecedentes

Sapa ñawpaqman puriy barrakuna rikchayninta tikranapaq qhipa yanapakuy clasekuna llamk'achiy.

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

Achka barras

Huk ñawpaqman puriy componente kaqpi achka ñawpaqman puriy barrakunata churay sichus necesitanki.

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

Rayado

Mayqinmanpas yapay .progress-bar-stripedhuk .progress-barraya CSS gradiente kaqnintakama ñawpaqman puriy barrapa qhipa llimp'in patapi churanapaq.

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

Rayas animadas

Chay rayayuq gradiente nisqapas animasqa kanmanmi. Yanapay .progress-bar-animatedkayman .progress-barCSS3 kawsachiykunawan rayakunata pañamanta lluq'iman kawsachinapaq.

<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

Variables nisqakuna

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

Marcos clave

.progress-bar-animated. _ Incluido en scss/_progress-bar.scss.

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