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 ojerure peteĩ roleha ariaatributo ojeike hag̃ua, umíva apytépe peteĩ téra ojeikekuaahápe (oipurúvo aria-label, aria-labelledby, térã ojoguáva).

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

html rehegua

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" 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.

html rehegua

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" 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 .

html rehegua

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" 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.

html rehegua

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" 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.

html rehegua

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ombohasávo he’iséva umi tecnología oipytyvõvape

Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .visually-hiddenmboꞌepy ndive.

Heta barra rehegua

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

html rehegua

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" 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.

html rehegua

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" 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.

html rehegua

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

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi barra progreso rehegua koꞌág̃a oipuru CSS mbaꞌekuaarã local on .progress-pe oñembotuichave hag̃ua personalización tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass mba’ekuaarã

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