Akãrapu'ã

Kuatiahaipyre ha techapyrã ojepuru hag̃ua Bootstrap barra progreso jeporupyre rehegua oguerekóva pytyvõ barra oñembojoajúva, fondo animado ha etiqueta jehaipyre rehegua.

Ko páhinape

Mba’éichapa omba’apo

Umi componente progreso rehegua oñemopuꞌa mokõi elemento HTML reheve, oĩ CSS omohenda hag̃ua ipekue ha mbovymi atributo. Ndoroiporúi elemento HTML5<progress> , roñangarekóvo ikatuha emoĩ apila umi barra progreso rehegua, emoingove ha emoĩ hi’ári etiqueta jehaipyre.

Jaipuru pe .progressenvoltura ramo jahechauka hagua valor máximo barra de progreso rehegua.
Jaipuru pe hyepypegua .progress-barjahechauka hagua mba’éichapa oho ko’áĝa peve.
Pe .progress-baroikotevẽ peteĩ estilo en línea, clase utilidad rehegua térã CSS jeporupyre omohenda hag̃ua ipypukukue.
Pe .progress-baravei oikotevẽ algunos roleha ariaatributos ikatu hag̃uáicha ojeikekuaa.

Emoĩmbaite upéva oñondive, ha reguereko koʼã ehémplo.

<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 ome’ẽ peteĩ po’i purupyrã oñemboguapy hag̃ua ipypuku . Ojesarekóva ne remikotevẽre, ko’ãva ikatu oipytyvõ oñemboheko pya’e hag̃ua progreso.

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

Etiquetas rehegua

Emoĩ etiqueta nde barra de progreso-pe emoĩvo jehaipyre .progress-bar.

25% rehegua .

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

Yvatekue

Ñamohenda peteĩ heightmba’ekuaarã añoite .progress, upévare remoambuéramo upe mba’ekuaarã hyepypegua .progress-barombotuichave ijeheguiete he’iháicha.

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

Umi antecedente rehegua

Eipuru umi clase utilidad fondo rehegua emoambue hag̃ua umi barra progreso peteĩteĩva jehechauka.

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

Heta barra rehegua

Emoinge heta barra progreso rehegua peteĩ componente progreso rehegua reikotevẽramo.

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

Oñemoĩ .progress-bar-stripedoimeraẽvape .progress-baremoĩ hag̃ua peteĩ raya CSS gradiente rupive barra de progreso sa’y fondo ári.

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

Pe gradiente rayado ikatu avei oñeanima. Oñemoĩve oñemoingove .progress-bar-animatedhag̃ua .progress-barumi raya akatúa guive asu gotyo CSS3 ñemongu’e rupive.

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

Variables rehegua

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

Umi cuadro clave rehegua

Ojepuru ojejapo hag̃ua CSS ñemongu’e .progress-bar-animated. Oike ipype scss/_progress-bar.scss.

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